Banner mit gewinkelten Formen

Question

Ich versuche, ein Banner mit einer dreieckigen Form am Ende zu erstellen.

.wrapper { 
 
    padding: 50px; 
 
    font-size: 0px; 
 
    line-height: 0%; 
 
    width: 0px; 
 
    border-top: 20px solid gray; 
 
    border-bottom: 20px solid gray; 
 
    border-right: none; 
 
}

<div class="wrapper">TEXT HERE</div>

Answer 1

Nur Sie heraus mit diesem als y helfen ou've versucht, aber es hat nicht funktioniert wie erwartet ... So grundlegende Idee ist, dass wir Elemente CSS Pseudo .. diesen Effekt nutzen können

Demo

.wrapper { 
    background: #C3C3C3; 
    padding: 20px; 
    font-size: 40px; 
    font-family: Arial; 
    text-align: center; 
    position: relative; 
} 

.wrapper:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-top: 42px solid transparent; 
    border-bottom: 42px solid transparent; 
    border-right: 40px solid white; /* Tweak this to increase triangles height */ 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

Hier tue nichts zu schaffen Wir verwenden ein Pseudo-Element, dh nichts als ein virtuelles Element, das nicht im DOM existiert, aber wir können es mit CSS einfügen und dieses Pseudo-Element auf der rechten Seite des Wrappers positionieren. Dies wird Ihnen helfen, das bandähnliche Ende zu erhalten. Beachten Sie, dass die Farbe des Dreiecks fest codiert ist und nicht transparent ist.

Answer 2

Versuchen Sie dies funktioniert

.wrapper { 
 
    font-family: arial; 
 
    font-size: 12px; 
 
    color: white; 
 
    background-color: black; 
 
    border: 1px solid white; 
 
    padding: 8px; 
 
    width: 100px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.wrapper:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-top: 16px solid transparent; 
 
    border-bottom: 16px solid transparent; 
 
    border-right: 16px solid white; 
 
    z-index: 10; 
 
    top: 0px; 
 
    right: 0px; 
 
}

<div class="wrapper">TEXT HERE</div>

Answer 3

Hier ist die Geige. https://jsfiddle.net/nileshmahaja/s5egaebr/

Ich habe verwendet: nach Selektor zum Wrapper Div.

CSS

.wrapper { 
    padding: 0 50px; 
    font-size: 0px; 
    line-height: 0%; 
    width: 0px; 
    height:120px; 
    background:#ddd; 
    position:relative; 
    width:500px; 
} 

.wrapper:after { 
    content:''; 
    width: 0px; 
    height: 0px; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-right: 60px solid #fff; 
    position:absolute; 
    right:0 
}