Benutzerdefinierte Rahmenfarbe für CSS-Dreiecke

Versuch, eine benutzerdefinierte Hex-Farbe für mein CSS-Dreieck (Rand) zu verwenden. Da jedoch Rahmeneigenschaften verwendet werden, bin ich mir nicht sicher, wie ich dies tun soll. Ich möchte mich aus Gründen der Kompatibilität von Javascript und CSS3 fernhalten. Ich versuche, dass das Dreieck einen weißen Hintergrund mit einem 1px-Rand (um die abgewinkelten Seiten des Dreiecks) mit der Farbe # CAD5E0 hat. Ist das möglich? Folgendes habe ich bisher:

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

Meine Geige: http://jsfiddle.net/4ZeCz/

Sie müssen es tatsächlich mit zwei Dreiecken vortäuschen ....

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

Geige hier aktualisiert

Ich weiß, dass Sie das akzeptieren, aber überprüfen Sie dies 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, dies ist einfacher, wenn man den Clip-Pfad verwendet :

.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 skalenen Dreiecken zu arbeiten, wie ich es getan habe, ist die Verwendung filter: drop-shadow(...)mit mehreren Werten und ohne Unschärferadius. Dies hat den zusätzlichen Vorteil, dass nicht mehrere Elemente benötigt werden oder auf beide zugegriffen werden muss : vor und nach: (Ich habe versucht, dies mit: nach Inhalten zu erreichen, die inline waren, und wollte daher auch eine absolute Positionierung vermeiden).

Für den obigen Fall könnte das CSS von: after wie folgt aussehen ( Geige ):

.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 jedoch, dass es einige Einschränkungen oder Verrücktheiten gibt:

• Keine Unterstützung in IE11 (obwohl in FF, Chrome und Edge in Ordnung zu sein scheint)
• Ich bin mir nicht ganz sicher, warum .5px für den <offset-y>Wert im zweiten Schlagschatten () oben eher wie 1px als 1px erscheint, obwohl ich mir vorstelle, dass es mit Trigonometrie zusammenhängt (obwohl ich zumindest auf meinem Monitor keinen Unterschied zwischen dem sehe tatsächliche trig-basierte Werte oder .5px oder sogar .1px).
• Rahmen größer als 1 Pixel (nun, ihr Aussehen ist so) scheinen nicht gut zu funktionieren. Zumindest habe ich die Lösung nicht gefunden, siehe unten für einen nicht optimalen Weg, um ein bisschen größer zu werden. (Ich würde denken, dass der dokumentierte, aber nicht unterstützte 4. Parameter ( <spread-radius>) von Schlagschatten () das ist, wonach ich wirklich suche, anstatt mehrere Filterwerte, aber das Hinzufügen in nur kaputten Dingen.) Hier können Sie sehen, was beginnt zu passieren, wenn über 1px ( Geige ) hinausgegangen wird :

.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 Lustigkeit, dass der erste (grün) einmal angewendet wird, der zweite (rot) jedoch sowohl auf das über den Rand erzeugte gelbe Dreieck als auch auf den grünen Schlagschatten () und den letzten (blau) angewendet wird. wird auf alle oben genannten angewendet. (Vielleicht hängt das auch mit dem Erscheinungsbild von .5px zusammen).

Aber ich denke, Sie können diese Schlagschatten nutzen, die aufeinander aufbauen, wenn Sie etwas benötigen, das breiter als 1 Pixel aussieht, indem Sie sie in etwas wie das Folgende ä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);

Dabei hat der allererste einen eingestellten Unschärferadius (in diesem Fall 2,5 Pixel, obwohl das Ergebnis multipliziert erscheint), und alle anderen haben eine Unschärfe bei 0. Dies funktioniert jedoch nur auf allen Seiten für dieselbe Farbe, und es ergibt sich in einigen abgerundeten Ecken sowie in ziemlich rauen Kanten, je größer Sie werden.

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