Warna batas kustom segitiga CSS

Mencoba menggunakan warna hex khusus untuk segitiga css saya (batas). Namun karena ini menggunakan properti perbatasan saya tidak yakin bagaimana cara melakukan ini. Saya ingin menghindari javascript dan css3 hanya karena kompatibilitas. Saya mencoba membuat segitiga memiliki latar belakang putih dengan batas 1px (di sekitar sisi siku segitiga) dengan warna # CAD5E0. Apakah ini mungkin? Inilah yang saya miliki sejauh ini:

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

Biola saya: http://jsfiddle.net/4ZeCz/

Anda benar-benar harus memalsukannya dengan dua segitiga ....

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

Diperbarui Fiddle di sini

Saya tahu Anda menerimanya tetapi periksa yang ini juga dengan lebih sedikit 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/

Saya pikir ini lebih sederhana menggunakan 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>

Cara lain untuk mencapai ini, terutama bagi seseorang yang membutuhkan ini untuk bekerja dengan segitiga sama sisi atau bahkan tidak sama panjang seperti yang saya lakukan, adalah menggunakan filter: drop-shadow(...)beberapa nilai dan tanpa radius buram. Ini memiliki keuntungan tambahan karena tidak memerlukan banyak elemen, atau akses ke keduanya : sebelum dan: sesudah (saya mencoba melakukannya dengan: setelah konten yang sebaris, jadi ingin menghindari pemosisian absolut juga).

Untuk kasus di atas, CSS: after bisa terlihat seperti ini ( biola ):

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

Saya pikir ada beberapa batasan atau keanehan:

• Tidak ada dukungan di IE11 (meskipun tampaknya baik-baik saja di FF, Chrome, dan Edge)
• Saya tidak begitu yakin mengapa .5px untuk <offset-y>nilai di drop-shadow kedua () di atas tampak lebih seperti 1px daripada 1px, meskipun saya membayangkan itu terkait dengan trigonometri (meskipun setidaknya di monitor saya, saya tidak melihat perbedaan antara nilai sebenarnya berbasis trigonometri atau .5px atau bahkan .1px dalam hal ini).
• Batas lebih besar dari 1px (yah, tampilannya seperti itu) sepertinya tidak berfungsi dengan baik. Atau setidaknya saya belum menemukan solusinya, meskipun lihat di bawah untuk cara yang kurang optimal untuk menjadi sedikit lebih besar. (Saya akan berpikir parameter ke-4 yang didokumentasikan-tetapi-tidak didukung ( <spread-radius>) dari drop-shadow () mungkin yang sebenarnya saya cari daripada beberapa nilai filter, tetapi menambahkannya hanya akan merusak semuanya.) Di sini Anda dapat melihat apa mulai terjadi saat melampaui 1px ( biola ):

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

Perhatikan kelucuan bahwa yang pertama (hijau) diterapkan sekali, tetapi yang kedua (merah) diterapkan baik ke segitiga kuning yang dibuat melalui perbatasan serta drop-shadow hijau (), dan yang terakhir (biru) diterapkan ke semua hal di atas. (Mungkin itu juga terkait dengan hal tampilan .5px).

Tapi saya rasa Anda bisa memanfaatkan drop-shadow ini yang saling membangun jika Anda membutuhkan sesuatu yang tampak lebih lebar dari 1px, dengan mengubahnya menjadi seperti berikut ( biola ):

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);

di mana yang pertama memiliki rangkaian blur-radius (dalam hal ini 2.5px, meskipun hasilnya tampak berlipat ganda), dan sisanya memiliki blur pada 0. Tetapi ini hanya akan berfungsi untuk warna yang sama di semua sisi, dan hasilnya di beberapa sudut yang tampak membulat serta tepi yang cukup kasar, semakin besar ukurannya.

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