CSS треугольник пользовательский цвет границы

Я знаю, что вы принимаете это, но проверьте это также с меньшим количеством css:

.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;
    right:-7px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-bottom:1px solid #CAD5E0;
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

http://jsfiddle.net/4ZeCz/3/

Я думаю, что это проще с помощью clip-path:

.container {
  width: 150px;
  min-height: 150px;
  background: #ccc;
  padding: 8px;
  padding-right: 6%;
  display: inline-block;
  clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}

<div class="container">
test content
</div>

.triangle{
    position: absolute;
    width:0px;
    height:0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 72px solid #DB5248;
}

.triangle:after{
    position: relative;
    content:"!";
    top:8px;
    left:-8px;
    color:#DB5248;
    font-size:40px;
}

.triangle:before{
    content:".";
    color: #DB5248;
    position: relative;
    top:-14px;
    left:-43px;
    border-left: 41px solid transparent;
    border-right: 41px solid transparent;
    border-bottom: 67px solid white;
}

другой способ сделать это, особенно для тех, кто нуждается в этом, чтобы работать с равносторонними или даже масштабными треугольниками, как я, - использовать filter: drop-shadow(...) С несколькими значениями и без радиуса размытия. Это имеет дополнительное преимущество, не требующее нескольких элементов или доступа к и: before and: after (я пытался сделать это с помощью :after content, который был встроен, поэтому тоже хотел избежать абсолютного позиционирования).

для вышеуказанного случая, :после того, как в CSS может выглядеть следующим образом (скрипка):

.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-style: solid;
  border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}

<div class="container">
  Test Container
</div>

Я думаю, что есть некоторые ограничения или странность, хотя:

• нет поддержки в IE11 (хотя кажется прекрасным в FF, Chrome и Edge)
• я не совсем уверен, почему .5 пикселей для <offset-y> значение во второй тени () выше выглядит более похожим на 1px, чем 1px, хотя я предполагаю, что это связано с тригонометрией (хотя на по крайней мере, на моем мониторе я не вижу разницы между фактическими значениями триггера или .5 пикселей или даже .1px, если на то пошло).
• границы больше 1px (ну, их внешний вид таким образом), похоже, не работают хорошо. Или, по крайней мере, я не нашел решения, хотя см. ниже для менее чем оптимального способа пойти немного больше. (Я бы подумал, что документированный, но неподдерживаемый 4-й параметр (<spread-radius>) drop-shadow () может быть то, что я действительно ищу вместо нескольких значений фильтра, но добавляя это просто сломало все полностью.) Здесь вы можете увидеть, что начинает происходить при выходе за пределы 1px (скрипка):

.container {
  background-color: #eee;
  padding: 1em;
}
.container:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20.4px 10px 0 10px;
  border-color: yellow transparent transparent transparent;
  margin-left: .25em;
  display: inline-block;
  filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}

<div class="container">
  Test Container
</div>

обратите внимание на забавность, что первый (зеленый) применяется один раз, но второй (красный) применяется как к желтому треугольнику, созданному через границу, так и к зеленой тени (), а последний (синий) применяется ко всем вышеперечисленным. (Возможно, это также связано с .5 пикселей внешний вид вещи).

но я думаю, вы можете воспользоваться этими тенями, построенными друг на друге, если вам нужно что-то более широкое, чем 1px, изменив их на что-то вроде следующего (скрипка):

filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);

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