Кольоровий колір межі трикутника CSS

Спроба використовувати нетиповий колір для мого css трикутника (межі). Однак, оскільки він використовує властивості кордону, я не знаю, як це зробити. Мені хотілося б уникати JavaScript та css3 просто через сумісність. Я намагаюся, щоб у трикутника було біле тло з рамкою 1px (навколо кутових сторін трикутника) з кольором # 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/

Ви насправді повинні підробити це з двома трикутниками….

.container {
    margin: 15px 30px;
    width: 200px;
    background: #fff;
    border: 1px solid #a00;
    position: relative;
    min-height: 200px;
    padding: 20px;
    text-align: center;
    color: #fff;
    font: bold 1.5em/180px Helvetica, sans-serif;
    text-shadow: 0 0 1px #000;
}

.container:after,
.container:before {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    width: 0;
    height: 0;
    border-style: solid;
}

.container:after {
    top: 10px;
    border-color: transparent transparent transparent #fdd;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #a00;
    border-width: 11px;
}

Оновлений Fiddle тут

Я знаю, ви це приймаєте, але перевіряйте це також із меншою кількістю 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>

Інший спосіб досягти цього, особливо для тих, хто потребує цього для роботи з рівносторонніми або навіть масштабними трикутниками, як я, - це використовувати filter: drop-shadow(...)з декількома значеннями і не радіус розмиття. Це має додаткову перевагу в тому, що мені не потрібні кілька елементів або доступ до обох : до і після (я намагався досягти цього: після вмісту, який був вбудованим, тому хотів уникнути і абсолютного позиціонування).

У наведеному вище випадку 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)
• Я не зовсім впевнений, чому .5px для <offset-y>значення у другому тіні () вище виглядає як 1px, ніж 1px, хоча я думаю, що це пов'язано з тригонометрією (хоча принаймні на моєму моніторі я не бачу різниці між фактичні значення на основі трійки або .5px або навіть .1px для цього питання).
• Межі, що перевищують 1 пікс (ну, таким чином, їх поява), здається, не працюють добре. Або, принаймні, я не знайшов рішення, хоча дивіться нижче для менш оптимального способу зробити трохи більшим. (Я думаю, що задокументований, але непідтримуваний 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>

Помітьте прикольність, що перший (зелений) наноситься один раз, а другий (червоний) застосовується як до жовтого трикутника, створеного через кордон, так і до зеленої тіні () та останнього (синій) застосовується до всього вищесказаного. (Можливо, це також пов’язано із зовнішнім виглядом .5px).

Але я думаю, ви можете скористатися цими тінями, що будуються один на одного, якщо вам потрібно щось ширше, ніж 1 піксель, змінивши їх на щось на зразок наступного ( скрипка ):

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 пікселя в цьому випадку, хоча результат видається множеним), а всі інші мають розмиття при 0. в деяких закруглених кутах, а також досить шорстких краях, чим більше ви йдете.

.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;
}