Как добавить граничный треугольник над тегом div

Ответ 1

Используя исходный блок с указателем и тенями в http://cssarrowplease.com/, вы можете восстановить их, чтобы сделать нужную форму:

.arrow_box {
    top:40px;
    position: relative;
    background: #ffffff;
    border: 1px solid #719ECE; /*set border colour here*/
    width: 200px;
    height: 200px;
    border-radius: 3px;
    -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8)); /*set shadow colour  and size here*/
    -moz-box-shadow: 0 1px 10px rgba(113, 158, 206,0.8);
    filter: drop-shadow(0 1px 10px rgba(113, 158, 206,0.8));
}
.arrow_box:after, 
.arrow_box:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 19px;
    left: 50%;
    margin-left: -19px;
}
.arrow_box:before {
    border-color: rgba(113, 158, 206, 0);
    border-bottom-color: #719ECE;
    border-width: 20px;
    left: 50%;
    margin-left: -20px;
}

http://fiddle.jshell.net/pausP/3/

если вам нужно переместить стрелку дальше вправо, а затем просто играйте с left для .arrow_box:after и .arrow_box:before

Ответ 2

Ответ "Пит" выше http://fiddle.jshell.net/pausP/3/ показывает, как это сделать, немного поиграйте с параметрами, чтобы увидеть, как все работает. И для тех, кто не понимает, как это работает, прочитайте эту статью, в которой показано, как создается треугольник, из границ (я имею в виду принцип). https://css-tricks.com/snippets/css/css-triangle ,

Тогда это просто для использования до и после, хорошо мы можем использовать только одну зависимость от того, что мы хотим, ведь до этого используется, чтобы сделать синий треугольник, и после белого треугольника они накладываются друг на друга один с другим, с 1px diff, чтобы иметь эту границу в треугольнике, но если это не нужно, так что вы используете как раз раньше, например. (вы можете сначала изменить границу, пока не увидите, как это делается). Хоп был полезен.

Ответ 3

Вы можете создать изображение треугольника в графическом редакторе, а затем поместить это изображение в DIV, а затем поместить DIV в фиксированную координату, выполнив абсолютное позиционирование DIV и установив координаты TOP и LEFT.

Ответ 4

в первую очередь вам нужно сделать изображение, подобное /\, с тем, что вы хотите иметь цвет границы, а затем сохранить это .png изображение своего предпочтительного местоположения, затем переместить в код css для позиционирования этого изображения и, следовательно, использовать следующий код:

фоновое изображение: URL (изображения/triangle_img.png); фон-повторить: не повторять; фон положение: сверху;

И добавив этот код с указанными стилями div. и я только даю код, чтобы поместить границу треугольника с рамкой разделения