CSS üçgeni özel kenarlık rengi

CSS üçgenim (kenarlık) için özel bir onaltılık renk kullanmaya çalışıyorum. Ancak sınır özelliklerini kullandığı için bunu nasıl yapacağımdan emin değilim. Sadece uyumluluk nedeniyle javascript ve css3'ten uzak durmak istiyorum. Üçgenin # CAD5E0 rengiyle 1px kenarlığı (üçgenin açılı kenarları etrafında) beyaz bir arka planına sahip olmasını sağlamaya çalışıyorum. Mümkün mü? Şimdiye kadar sahip olduğum şeyler:

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

Kemanım: http://jsfiddle.net/4ZeCz/

Aslında bunu iki üçgenle taklit etmelisin ...

.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 burada güncellendi

Bunu kabul ettiğinizi biliyorum ama bunu da daha az css ile kontrol edin:

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

Bunun clip-path kullanarak daha basit olduğunu düşünüyorum :

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

Bunu başarmanın bir başka yolu, özellikle benim yaptığım gibi eşkenar ve hatta skalen üçgenlerle çalışmasına ihtiyaç duyan biri için filter: drop-shadow(...), birden çok değerle ve bulanıklık yarıçapı olmadan kullanmaktır . Bu, birden fazla öğeye ihtiyaç duymama veya her ikisine birden erişme gibi ek avantajlara sahiptir : önce ve: sonra (bunu satır içi olan içerikten sonra yapmaya çalışıyordum, bu nedenle mutlak konumlandırmadan da kaçınmak istiyordum) .

Yukarıdaki durum için: after's CSS'si şöyle görünebilir ( keman ):

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

Yine de bazı sınırlamalar veya tuhaflıklar olduğunu düşünüyorum :

• IE11'de destek yok (ancak FF, Chrome ve Edge'de iyi görünüyor)
• Bunun neden .5px olduğundan emin değilim. <offset-y> rağmen, yukarıdaki ikinci alt gölgedeki () değer daha çok 1px gibi göründüğünden , ancak en azından monitörümde gerçek tetik tabanlı değerler veya bu konuda .5px veya hatta .1px).
• 1 pikselden büyük olan sınırlar (bu şekilde görünüşleri) iyi çalışmıyor gibi görünüyor. Ya da en azından çözümü bulamadım, yine de biraz daha büyütmek için optimalin altında bir yol için aşağıya bakın. (Belgelenmiş ama desteklenmeyen alt <spread-radius>gölgenin () 4. parametresinin ( ) birden çok filtre değeri yerine gerçekten aradığım şey olabileceğini düşünüyorum, ancak onu sadece ekleyerek her şeyi tamamen kırdı.) Burada ne olduğunu görebilirsiniz. 1 pikselin ( keman ) ötesine geçildiğinde gerçekleşmeye başlar :

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

İlkinin (yeşil) bir kez uygulandığı, ancak ikincisinin (kırmızı) hem kenarlıkla oluşturulan sarı üçgene hem de yeşil alt gölge () ve sonuncusuna (mavi) uygulandığına dikkat edin. yukarıdakilerin tümüne uygulanır. (Belki de bu .5px görünüm şeyiyle de ilgilidir).

Ancak, 1 pikselden daha geniş görünen bir şeye ihtiyacınız varsa, bunları aşağıdaki gibi ( keman ) değiştirerek birbiri üzerine inşa edilen bu gölgelerden yararlanabileceğinizi tahmin ediyorum :

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

ilkinin bir bulanıklık yarıçapı kümesine sahip olduğu (bu durumda sonuç çarpılmış görünse de 2,5 piksel) ve geri kalan her şeyin 0'da bulanık olduğu yerlerde. Ancak bu yalnızca her tarafta aynı renk için çalışacak ve sonuç bazı yuvarlak görünümlü köşelerde ve oldukça pürüzlü kenarlarda büyüdükçe büyür.

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