css3 dreieckige Form mit einer abgerundeten Ecke
Ich versuche zur Umsetzung dieses Dialog-box ohne Rückgriff auf die Verwendung von Bildern für die Obere Rechte Ecke. Das folgende ist meine Umsetzung für Sie.
.box{
-webkit-border-radius: 6px 6px;
-moz-border-radius: 6px / 6px;
-khtml-border-radius: 6px / 6px;
border-radius: 6px / 6px;
width:33%;
border: 1px solid #DDD;
display: inline-block;
margin-right:10px;
margin-bottom: 10px;
max-width: 290px;
padding: 10px;
}
.triangle-topright {
width: 0;
height: 0;
border-top: 50px solid #fafad6;
border-left: 50px solid transparent;
-webkit-border-top-right-radius: 6px 6px;
-moz-border-radius-topright: 6px / 6px;
-khtml-border-top-right-radius: 6px / 6px;
border-top-right-radius: 6px / 6px;
float: right;
margin-top: -10px;
margin-right: -10px;
}
<div class="box">
<div class="triangle-topright"></div>
<h3>title</h3>
<p>stuff</p>
</div>Das problem ist, das funktioniert für safari, aber für chrome-webkit-border-top-right-radius: 6px 6px; scheint zu einem Konflikt führen. Wenn es aktiviert ist, wird oben rechts gerundet werden, aber das Dreieck verschwinden.
gibt es eine Abhilfe für dieses? oder gibt es eine bessere Möglichkeit, dies zu tun?
danke.
- Sie könnten versuchen, das zeichnen in einem canvas-statt einem div. Erstellen ein Dreieck wäre dann einfach.
- Eine weitere option kann einige CSS3-Farbverlauf für den hintergrund (online-Generatoren wie colorzilla.com/gradient-editor möglicherweise guter Ort, um zu starten)
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
One-Lösung, die scheint zu funktionieren (getestet in Chrome, Safari, Firefox) ist, entfernen Sie die folgenden Zeilen aus
.triangle-toprightUnd stattdessen einfach hinzufügen
overflow: hidden;zu den.boxcss.Demo: http://jsfiddle.net/BcrKH/
Ich denke, dass Ihre Idee, eine dreieckige Form in CSS ist über-denken das problem. Eine CSS-Gradienten scheint die einfachere Lösung hier.
Es ist möglich, erstellen Sie Verläufe, die nur eine abrupte Farbe ändern, und man kann Sie diagonal zu, so dass es scheint, wie es kann, bieten genau die Lösung, die Sie suchen.
Jetzt haben wir festgestellt einen anderen Weg, um die Frage, finden wir in anderen Fragen wie diese eine Referenz: Wie man eine diagonal css-Farbverlauf ohne die Farben zusammen mischen(eine starke Farbe ändern), dass die vertriebenen 70% auf der rechten Seite?
Das einzige problem mit CSS-Verläufen ist, dass Sie nicht unterstützt in älteren Versionen von IE. Dies kann gelöst werden, jedoch. IE6/7/8 hat seine eigenen
filterMethode zum erstellen von Verläufen, die können den trick tun, aber meine Vorliebe wäre, die Nutzung CSS3Pie, das Ihnen erlaubt, die standard-CSS3 Farbverläufe auch in alten IE-Versionen.Hoffe, das hilft.