У меня есть тег div,
__________
| |
| |
| |
|__________|
Я хочу добавить к нему небольшой треугольник.
_______/\_
| |
| |
| |
|__________|
Примечание. Я хочу, чтобы мой тег div имел границу определенного цвета и тело div другого. Скажем, мой фон div будет белым, а граница должна быть синим. Смотрите, пожалуйста. http://fiddle.jshell.net/pausP/
Используя исходный блок с указателем и тенями в 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
Ответ "Пит" выше http://fiddle.jshell.net/pausP/3/ показывает, как это сделать, немного поиграйте с параметрами, чтобы увидеть, как все работает. И для тех, кто не понимает, как это работает, прочитайте эту статью, в которой показано, как создается треугольник, из границ (я имею в виду принцип). https://css-tricks.com/snippets/css/css-triangle ,
Тогда это просто для использования до и после, хорошо мы можем использовать только одну зависимость от того, что мы хотим, ведь до этого используется, чтобы сделать синий треугольник, и после белого треугольника они накладываются друг на друга один с другим, с 1px diff, чтобы иметь эту границу в треугольнике, но если это не нужно, так что вы используете как раз раньше, например. (вы можете сначала изменить границу, пока не увидите, как это делается). Хоп был полезен.
Вы можете создать изображение треугольника в графическом редакторе, а затем поместить это изображение в DIV, а затем поместить DIV в фиксированную координату, выполнив абсолютное позиционирование DIV и установив координаты TOP и LEFT.
в первую очередь вам нужно сделать изображение, подобное /\, с тем, что вы хотите иметь цвет границы, а затем сохранить это .png изображение своего предпочтительного местоположения, затем переместить в код css для позиционирования этого изображения и, следовательно, использовать следующий код:
фоновое изображение: URL (изображения/triangle_img.png); фон-повторить: не повторять; фон положение: сверху;
И добавив этот код с указанными стилями div. и я только даю код, чтобы поместить границу треугольника с рамкой разделения