1. Zuhause
  2. Frage und Antwort
  3. Border-Bild-Gradientenmuster in Dreiecksform

Border-Bild-Gradientenmuster in Dreiecksform

2016-07-28 25 views
2

Ich möchte ein ungerades Dreieck mit CSS erstellen. Mein erster Gedanke war, transparente Grenzen mit transform: rotate zu verwenden und es funktionierte (siehe linkes Dreieck). Jetzt möchte ich ein Farbverlaufsrand-Bildmuster als Hintergrund für dasselbe Dreieck verwenden, aber ich kann es nicht funktionieren lassen. Ich habe versucht, viele Dinge wie border-width, Wrapper und overflow:hidden unter anderem zu ändern, hat nichts funktioniert. Hier veröffentliche ich einen meiner Versuche (siehe rechte Form), wenn Sie sehen, dass das Muster den ganzen Raum einnimmt und nicht der Dreiecksform folgt. Irgendwelche Ideen?Border-Bild-Gradientenmuster in Dreiecksform

#top-left { 
 
    position:absolute; 
 
    left:78px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid transparent; 
 
    border-right: 80px solid black; 
 
    border-bottom: 50px solid transparent; 
 
    -webkit-transform: rotate(-20deg); 
 
} 
 

 
#top-right { 
 
    position:absolute; 
 
    left:300px; 
 
    width: 0; 
 
    height: 0; 
 
    border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10; 
 
    border-image-width: 100px 80px 50px 0px; 
 
    border-width: 100px 80px 50px 0px; 
 
    border-style: solid; 
 
    -webkit-transform: rotate(-20deg); 
 
}
<div id="wrapper"> 
 
<div id="top-left"></div> 
 
<div id="top-right"></div> 
 
</div>

Edit: Andrey Fedorov Antwort ist gut, aber es ist ein Problem, wenn der Hintergrund nicht eine Farbe ist, wie dies zum Beispiel:

body{ 
 
background-color: #6d695c; 
 
background-image: 
 
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), 
 
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); 
 
background-size: 70px 120px; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
} 
 

 
#top-left { 
 
    position:absolute; 
 
    left:0px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 100px solid #fff; 
 
\t border-right: 80px solid transparent; 
 
\t border-bottom: 50px solid #fff; 
 
    -webkit-transform: rotate(-20deg); 
 
} 
 

 
#top-right { 
 
    position:absolute; 
 
    z-index: -10; 
 
    left:0; 
 
    width: 0; 
 
    height: 0; 
 
    border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10; 
 
    border-image-width: 100px 80px 50px 0px; 
 
    border-width: 100px 80px 50px 0px; 
 
    border-style: solid; 
 
    -webkit-transform: rotate(-20deg); 
 
}
<div id="wrapper"> 
 
<div id="top-left"></div> 
 
<div id="top-right"></div> 
 
</div>

Quelle

2016-07-28 Theodore K.

Antwort

1

Sie noch mit no-repeat und background-sizelinear-gradient mussten jeweils Stücke ziehen können:

Beispiele von Schritten a single tag:

/* testing gradients */ 
 
p , div#wrapper { 
 
    width:80px; 
 
    float:left; 
 
    margin:1em; 
 
    height:150px; 
 
    /* see me then remove this shadow */ 
 
    box-shadow:0 0 0 2px; 
 
} 
 
p { 
 
    background: 
 
    linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat ; 
 
    background-size: 
 
    100% 15px; 
 
    transform: rotate(-20deg); 
 
} 
 
p + p{ 
 
    background: 
 
    linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , 
 
    linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat; 
 
    background-size: 
 
    100% 15px, 
 
    100% 65%; 
 
} 
 
p + p + p { 
 
    
 
    background: 
 
    linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , 
 
    linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat, 
 
    linear-gradient(33deg , transparent 42px, pink 43px) no-repeat bottom; 
 
    background-size: 
 
    100% 15px, 
 
    100% 65%, 
 
    100% 8px; 
 
} 
 
p+ p + p + p { 
 
    background: 
 
    linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat , 
 
    linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat, 
 
    linear-gradient(33deg , transparent 42px, pink 43px) no-repeat bottom, 
 
    linear-gradient(33deg, transparent 42px, purple 43px) bottom no-repeat; 
 
    background-size: 
 
    100% 15px, 
 
    100% 65%, 
 
    100% 8px, 
 
    100% 35.5%; 
 
    } 
 
p:last-of-type{ 
 
    box-shadow:0 0 
 
} 
 

 
/* your original CSS/issue */ 
 
body{ 
 
background-color: #6d695c; 
 
background-image: 
 
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), 
 
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); 
 
background-size: 70px 120px; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
} 
 

 
#top-left { 
 
    position:absolute; 
 
    left:0px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 100px solid #fff; 
 
\t border-right: 80px solid transparent; 
 
\t border-bottom: 50px solid #fff; 
 
    -webkit-transform: rotate(-20deg); 
 
    transform: rotate(-20deg); 
 
} 
 

 
#top-right { 
 
    position:absolute; 
 
    z-index: -10; 
 
    left:0; 
 
    width: 0; 
 
    height: 0; 
 
    border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10; 
 
    border-image-width: 100px 80px 50px 0px; 
 
    border-width: 100px 80px 50px 0px; 
 
    border-style: solid; 
 
    -webkit-transform: rotate(-20deg); 
 
    transform: rotate(-20deg); 
 
}
<!-- your issue --> 
 
<div id="wrapper"> 
 
<div id="top-left"></div> 
 
<div id="top-right"></div> 
 
</div> 
 
<!-- p for testing purpose --> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p> 
 
<p></p>

inbricated Element + Gradient & verwandeln könnte auch tun:

body{ 
 
background-color: #6d695c; 
 
background-image: 
 
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 
 
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), 
 
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); 
 
background-size: 70px 120px; 
 
} 
 

 
div.inbricate { 
 
    margin:1em; 
 
    height:150px; 
 
    width:80px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    transform:rotate(-20deg); 
 
    box-shadow: 0 0 ; 
 
} 
 
.inbricate div { 
 
    transform:rotate(31deg) scale(1.2, 0.9) skew(-5deg); 
 
    transform-origin: 100% 102%; 
 
    height:100%; 
 
    background:linear-gradient(-40deg, pink 8%, purple 8%, purple 65%, pink 65%, pink 75%, purple 75%) 
 
}
<div class=inbricate> 
 
    <div> 
 
    </div> 
 
</div>

Quelle

2016-07-28 13:01:01

+0

Also, so das? http://codepen.io/8odoros/pen/kXpqvA?Editoren = 1100 nett! –

+0

@ 8odoros Ja, das ist die Idee, Sie können auch Elemente einbetten und transformieren: http://codepen.io/gc-nomade/pen/OXEqog –

+0

Ich behalte das sicherlich, es ist Berechnungen-schwer, aber ... nicht Ihre Schuld, aber eines meiner Hauptziele ist das Ändern der Muster über eine Benutzeroberfläche. –

1

Eine mögliche Lösung Ionen ist dies:

  • Legen Sie beide Formen an der gleichen Stelle.
  • Mit z-index den einen mit dem Muster hinter den anderen gehen
  • Verwenden Sie Weiß (oder welche Farbe auch immer der Formhintergrund ist), um den Randbereich außerhalb des Dreiecks zu malen.
  • Machen Sie den Rand transparent, die das Dreieck Farbe

#wrapper { 
 
    position: relative; 
 
    } 
 

 
#top-left { 
 
    position:absolute; 
 
    left:0px; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 100px solid #fff; 
 
\t border-right: 80px solid transparent; 
 
\t border-bottom: 50px solid #fff; 
 
    -webkit-transform: rotate(-20deg); 
 
} 
 

 
#top-right { 
 
    position:absolute; 
 
    z-index: -10; 
 
    left:0; 
 
    width: 0; 
 
    height: 0; 
 
    border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10; 
 
    border-image-width: 100px 80px 50px 0px; 
 
    border-width: 100px 80px 50px 0px; 
 
    border-style: solid; 
 
    -webkit-transform: rotate(-20deg); 
 
}
<div id="wrapper"> 
 
<div id="top-left"></div> 
 
<div id="top-right"></div> 
 
</div>

Quelle

2016-07-28 09:31:24

+0

Was? Das ist Magie! Lasst mich diese Unerschrockenheit ein wenig studieren, bevor ich upvote ;-) nur ein kleines Problem (zumindest in Chrome) gibt es eine ultra dünne Grenze, die um die Box des Dreiecks sichtbar ist. –

+0

diese Artefakte linearen Gradienten in einem Chrom ( –

+0

Nur eine Anmerkung der Vorsicht, eine weiße Schicht auf der Oberseite wäre nicht genau das, was das OP zu tun versucht. – Harry

 Verwandte Themen

  • Keine verwandten Themen^_^