Baner z wygiętymi kształtami

Question

Próbuję utworzyć baner o kształcie trójkąta na końcu.

.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

tylko pomaga się z tego, ponieważ y ou've próbował, ale nie działało zgodnie z oczekiwaniami ... Więc Podstawowym założeniem jest to, że możemy wykorzystać elementy CSS pseudo stworzyć taki efekt ..

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; 
} 

Tutaj nic nie robie fantazyjne, używamy pseudoelementu, tj. nic oprócz wirtualnego elementu, który nie istnieje w DOM, ale możemy go wstawić za pomocą CSS i umieścić ten pseudo element po prawej stronie opakowania. To pomoże ci uzyskać koniec wstążki. Zwróć uwagę, że kolor trójkąta jest zakodowany i nie jest przezroczysty.

Answer 2

Spróbuj to działa

.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

tutaj jest skrzypce. https://jsfiddle.net/nileshmahaja/s5egaebr/

Użyłem: po selekcji do opakowania 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 
}