Benutzerdefinierte Rahmenfarbe für CSS-Dreiecke

114

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/

Ed R.
quelle

Antworten:

185

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

Geben Sie hier die Bildbeschreibung ein

Scott
quelle
1
Das ist perfekt! genau das, was ich brauchte. Danke dir.
Ed R
1
Hey, ich verstehe nicht, wie ich das Dreieck so ändern würde, dass es auf der anderen Seite der Box erscheint (ich verstehe nicht, wie das Dreieck CSS funktioniert)
Kevin
1
SMRT - Du bist so schlau!
Code Whisperer
5
Beachten Sie, für diejenigen mit der gleichen Frage wie @ Kevin. Schauen Sie sich das border-colorAttribut an. Je nach farbigem Rand zeigt das Dreieck in eine andere Richtung. So schalten Sie auf den Pfeil links Änderung Punkt border-colorzu transparent #e3f5ff transparent transparent;in beiden, .container:afterund.container:before
rmagnum2002
1
@ Scott Danke dafür! Ihre JS Fiddle war genau richtig! Seien Sie jedoch vorsichtig mit Copypasta aus JSFiddle. Es wurden zwei unsichtbare und ungültige Zeichen zu meiner CSS-Datei hinzugefügt, die Validierungs- / Analysefehler in dieser CSS-Datei verursachten. Nachdem ich die unsichtbaren Zeichen entfernt hatte (die Zeichen hatten eine Breite von Null, sodass der Cursor sie nicht zeigte, aber ich konnte die Rücktaste drücken), funktionierte es wunderbar. Es war nicht Ihr Code, der das Problem war. Ich denke, JS Fiddle hat einige mysteriöse Zeichen in den angezeigten Code eingefügt. Keine Ahnung, aber ich wollte es nur der Nachwelt zuliebe erwähnen, falls jemand auf dasselbe Problem stoßen sollte.
Hypervisor666
91

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/

Sandeep
quelle
Hey, ich verstehe nicht, wie ich das Dreieck so ändern würde, dass es auf der anderen Seite der Box erscheint (ich verstehe nicht, wie das Dreieck CSS funktioniert)
Kevin
2
@ Kevin Ich erstelle dies bitte überprüfen Sie jsfiddle.net/4ZeCz/97 . Versuchen Sie, mit den Eigenschaften zu spielen, die ich verwendet habe und wenn Sie Fragen haben, können Sie mich stellen :)
Sandeep
3
Eine Erklärung: Dadurch wird ein normales quadratisches Element mit Rändern an zwei benachbarten Seiten erstellt, wodurch ein geneigtes Dreieck entsteht. Dann wird das Quadrat um 45 Grad geneigt, sodass das Dreieck nach oben zeigt (oder wo immer Sie es möchten). Übrigens brauchen Sie -webkit-jetzt nur das Präfix (und -ms-für IE9). Alle anderen Browser unterstützen dies ohne Fixierung.
Rvighne
Sehr clevere Lösung! Danke dir.
Solhan
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>

Lalengua
quelle
1

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.

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