web-dev-qa-db-de.com

Benutzerdefinierte Rahmenfarbe des CSS-Dreiecks

Versuch, eine benutzerdefinierte Hex-Farbe für mein CSS-Dreieck (Rahmen) zu verwenden. Da es jedoch Grenzwerte verwendet, bin ich mir nicht sicher, wie er dies tun soll. Ich möchte aus Gründen der Kompatibilität auf Javascript und CSS 3 verzichten. 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/

102
Ed R

Man muss es tatsächlich mit zwei Dreiecken fälschen ...

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

 enter image description here

163
Scott

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/

83
sandeep

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>

1
lalengua

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.

0
Max Starkenburg
.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;
}
0
Sharan