Machen CSS3-Dreieck mit linearen Farbverlauf

Muss ich erstellen, die Schaltfläche mit dem Dreieck auf der einen Seite (wie diese http://css-tricks.com/triangle-breadcrumbs/) mit linear vertikaler Farbverlauf und Grenze, und ich will reines CSS3.
Es ist ok, wenn ich muss 45deg "Dreieck", ich Schreibe einfach smth like this

.button:after {
    -webkit-transform: rotate(45deg);
    background: -webkit-linear-gradient(-45deg, #fff, #000);
    content: '';
    width: 2em;
    height: 2em;
    display: block;
}

ausblenden und die Hälfte des pseudo-element unter .- Taste (damit nur noch die Hälfte ist sichtbar, wie ein Dreieck).

Aber wenn ich einen anderen Winkel (z.B. steil) - ich kann es nicht mit standart XY drehen und skalieren. Ich kann z.B. 2 divs, einen für die Obere Hälfte des Dreiecks und eine für unten, aber es könnte ein problem mit Rahmen und Farbverlauf.

Vielleicht ist es möglich, mit mehreren Steigungen mit Farbe hält?

InformationsquelleAutor Wayne | 2012-05-14

3

Ich hoffe, dies wird Ihnen helfen, die ich gemacht habe, Farbverlauf, Dreieck mit nur einem div mit reinem css.

http://jsfiddle.net/NDJ3S/15/

AKTUALISIERT

Nun überprüfen Sie Ihre Arbeit :- http://jsfiddle.net/NDJ3S/17/

Funktioniert nicht in Chrome.
jetzt prüfen :- jsfiddle.net/NDJ3S/17
Es funktioniert jetzt 🙂

InformationsquelleAutor Shailender Arora

So, ich weiß du willst das auch mit CSS machen, aber ich Tue immer das in SVG:

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="fill" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(224,224,224);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(153,153,153);stop-opacity:1"/>
</linearGradient>
</defs>

<path d="M 0 0 L 64 0 L 32 64 z" stroke="colourname" fill="url(#fill)"/>

</svg>

Können Sie einbetten, etwa so:

<img src="triangle.svg" alt="Triangle" class="triangle" />

Könnte man auch machen das toggle-Bild in der gleichen Weise, und setzen Sie es mithilfe von JavaScript oder jQuery:

$(".triangle").click(function()
{
    if($(this).attr("src") == "triangle.svg")
        $(this).attr("src", "triangledown.svg");

    else $(this).attr("src", "triangle.svg");
});

Ich weiß, SVG, aber ich bin immer noch Fragen, ob es eine andere Möglichkeit (CSS)
Meine einzige Sorge mit der Verwendung von CSS ist, dass die border-image-Eigenschaft ist nicht kompatibel mit IE9.

InformationsquelleAutor James Wright

5

Ja, es kann getan werden, nur mithilfe von CSS-Verläufen. Sie müssen nur drei Steigungen auf der Oberseite des anderen (beachten Sie, dass die erste Liste ist die oben). Der eine an der Unterseite (letztes aufgeführt) ist der vertikale gradient. Oben drauf, Sie haben zwei Steigungen, die auch Farbe, die hält.

Etwas wie dieses:
```
background: linear-gradient(30deg, transparent 37%, #fff 37%), 
            linear-gradient(-30deg, transparent 37%, #fff 37%), 
            linear-gradient(to bottom, #ccc, #000);
```
Habe ich eine kleine demo kann hier angesehen werden: http://dabblet.com/gist/2705739

InformationsquelleAutor Ana
0

Haben Sie überprüft, die css-Transformation scaleY?
Mit einem anderen element um den Pfeil (oder vielleicht mit einem pseudo-element) es ermöglicht Ihnen, zu skalieren das Ergebnis.
```
transform: scaleY(0.5)
```
Beispiel:

http://jsfiddle.net/xaddict/hJyrU/ (webkit-nur Beispiel)

EDIT: Hinzugefügt translateZ(0) zu force-GPU-rendering in webkit (anti-alias-Ränder, mhmmmm!)

InformationsquelleAutor xaddict

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.