Попытка использовать собственный шестнадцатеричный цвет для моего треугольника (границы) css. Однако, поскольку он использует свойства границы, я не уверен, как это сделать. Я хотел бы держаться подальше от javascript и css3 просто из-за совместимости. Я пытаюсь сделать треугольник белым фоном с границей 1 пиксель (вокруг угловых сторон треугольника) с цветом # CAD5E0. Это возможно? Вот что у меня есть на данный момент:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}Моя скрипка: http://jsfiddle.net/4ZeCz/
css
border
css-shapes
Эд Р
источник
источник
border-colorатрибут, в зависимости от цветной границы треугольник будет указывать в другом направлении. Чтобы повернуть стрелку влево, изменитеborder-colorнаtransparent #e3f5ff transparent transparent;в обоих,.container:afterи.container:beforeЯ знаю, что вы принимаете это, но проверьте это также с меньшим количеством css:
http://jsfiddle.net/4ZeCz/3/
источник
-webkit-префикс сейчас нужен только (и-ms-для IE9). Все остальные браузеры поддерживают его без префикса.Я думаю, что это проще, используя clip-path :
источник
Другой способ добиться этого, особенно для тех, кому это нужно для работы с равносторонними или даже равносторонними треугольниками, как это сделал я, - использовать
filter: drop-shadow(...)с несколькими значениями и без радиуса размытия. Это дает дополнительное преимущество в виде отсутствия необходимости в нескольких элементах или доступе к обоим. : before и: after (я пытался добиться этого с помощью: after контента, который был встроенным, поэтому также хотел избежать абсолютного позиционирования).В приведенном выше случае CSS: after может выглядеть так ( скрипка ):
Я думаю есть некоторые ограничения или странности:
<offset-y>значения во втором drop-shadow () выше больше похоже на 1px, чем на 1px, хотя я предполагаю, что это связано с тригонометрией (хотя, по крайней мере, на моем мониторе я не вижу разницы между фактические значения на основе триггеров или 0,5 пикселей или даже 0,1 пикселей, если на то пошло).<spread-radius>) drop-shadow () может быть тем, что я действительно ищу, а не несколькими значениями фильтра, но добавление его просто полностью сломало.) Здесь вы можете увидеть, что начинает происходить при выходе за пределы 1px ( скрипка ):Обратите внимание на забавность того, что первый (зеленый) применяется один раз, а второй (красный) применяется как к желтому треугольнику, созданному через границу, так и к зеленой тени (), и к последнему (синему) применяется ко всему вышеперечисленному. (Возможно, это также связано с внешним видом .5px).
Но я думаю, вы можете воспользоваться преимуществами этих падающих теней, накладывающихся друг на друга, если вам нужно что-то более широкое, чем 1 пиксель, изменив их на что-то вроде следующего ( скрипка ):
где у самого первого установлен радиус размытия (2,5 пикселя в данном случае, хотя результат кажется умноженным), а у всех остальных есть размытие на 0. Но это будет работать только для одного и того же цвета со всех сторон, и в результате в некоторых закругленных углах, а также на довольно неровных краях, чем больше вы идете.
источник
источник