Benutzerdefinierte Rahmenfarbe des CSS-Dreiecks

Ich weiß, dass du das akzeptierst, aber überprüfe dieses auch mit weniger 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/

Ich denke, das ist einfacher mit 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>

Eine andere Möglichkeit, dies zu erreichen, insbesondere für jemanden, der dies benötigt, um mit gleichseitigen oder sogar skalierten Dreiecken wie ich zu arbeiten, ist die Verwendung von filter: drop-shadow(...) mit mehreren Werten und ohne Unschärfekreis. Dies hat den zusätzlichen Vorteil, dass nicht mehrere Elemente oder der Zugriff auf beide: before und: after benötigt wird (ich habe versucht, dies mit: after content, der inline war, zu erreichen, wollte also auch absolute Positionierung vermeiden) 

Für den oben genannten Fall könnte das CSS des: after folgendermaßen aussehen ( fiddle ):

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

Ich denke, es gibt jedoch einige Einschränkungen oder Verrückte:

• Keine Unterstützung in IE11 (scheint aber in FF, Chrome und Edge in Ordnung zu sein)
• Ich bin mir nicht ganz sicher, warum .5px für den <offset-y>-Wert im zweiten Drop-shadow () oben eher wie 1px aussieht als 1px, obwohl ich mir vorstellen kann, dass es mit der Trigonometrie zusammenhängt (obwohl ich auf meinem Monitor zumindest keinen Unterschied sehe die tatsächlichen trig-basierten Werte oder .5px oder sogar .1px für diese Angelegenheit).
• Rahmen, die größer als 1 Pixel sind (gut, ihr Aussehen auf diese Weise), scheinen nicht gut zu funktionieren. Oder zumindest habe ich keine Lösung gefunden, obwohl unten ein nicht optimaler Weg ist, um etwas größer zu werden. (Ich denke, dass der dokumentierte, aber nicht unterstützte 4. Parameter (<spread-radius>) von drop-shadow () das ist, wonach ich wirklich suche, anstatt mehrere Filterwerte, aber das Hinzufügen von rein brach die Dinge vollständig.) Hier sehen Sie Was passiert, wenn man über 1px hinausgeht ( Geige ):

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

Beachten Sie die Komik, dass der erste (grüne) einmal angewendet wird, der zweite (rote) wird jedoch sowohl auf das gelbe, als Rahmen erstellte Dreieck als auch auf den grünen Schatten () und den letzten (blauen) angewendet. wird auf alle oben genannten angewendet. (Vielleicht hängt das auch mit der Erscheinung von .5px zusammen).

Aber ich schätze, Sie können diese Schlagschatten nutzen, die aufeinander aufbauen, wenn Sie etwas breiter aussehendes als 1px benötigen, indem Sie sie in Folgendes ändern ( Geige ):

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

wenn der allererste eine Unschärfekreisradiusmenge hat (in diesem Fall 2,5px, obwohl das Ergebnis multipliziert erscheint), haben alle anderen Unschärfen bei 0. Dies funktioniert jedoch nur für die gleiche Farbe auf allen Seiten, und es ergibt sich in einigen abgerundeten Ecken sowie recht rauen Kanten, je größer Sie gehen.

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