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/
css
border
css-shapes
Ed R.
quelle
quelle
border-color
Attribut an. Je nach farbigem Rand zeigt das Dreieck in eine andere Richtung. So schalten Sie auf den Pfeil links Änderung Punktborder-color
zutransparent #e3f5ff transparent transparent;
in beiden,.container:after
und.container:before
Ich weiß, dass Sie das akzeptieren, aber überprüfen Sie dies auch mit weniger CSS:
http://jsfiddle.net/4ZeCz/3/
quelle
-webkit-
jetzt nur das Präfix (und-ms-
für IE9). Alle anderen Browser unterstützen dies ohne Fixierung.Ich denke, dies ist einfacher, wenn man den Clip-Pfad verwendet :
quelle
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 ):
Ich denke jedoch, dass es einige Einschränkungen oder Verrücktheiten gibt:
<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).<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 :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 ):
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.
quelle
quelle