So erstellen Sie eine abgerundete Chevron-Form

Question

Ich versuche, eine Chevron-Form mit CSS mit einem abgerundeten Kopf (obere Kante, anstelle eines Dreiecks) zu erstellen, aber nicht in der Lage, dies zu erreichen. Kann jemand helfen? Demo here.

CSS:

#shape{ 
    width: 100px; 
    height: 100px; 
    background-color: lightblue; 
    -webkit-clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0); 
    clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0); 
} 

Answer 1

Eine runde zickzack, he? Etwas wie das?

Ich habe dies mit einem Pseudo-Element und einem radialen Gradienten erreicht.

.rounded { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: relative; 
 
    margin: 100px; 
 
    background: tomato; 
 
} 
 
.rounded:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -20%; 
 
    height: 20%; 
 
    width: 100%; 
 
    left: 0; 
 
    background: radial-gradient(ellipse at top center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, tomato 71%, tomato 100%); 
 
}

<div class="rounded"></div>

---

Eine Alternative stattdessen einen hohen Box Schatten Wert zu verwenden wäre, die Box Schattenfarbe des mit Pseudoelement als die Farbe des Hauptelement auch:

div{ 
 
    height:200px; 
 
    width:200px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    
 
    } 
 
div:before{ 
 
    content:""; 
 
    position:absolute; 
 
    top:-25%;left:0; 
 
    height:50%; 
 
    width:100%; 
 
    border-radius:50%; 
 
    box-shadow:0 0 0 999px tomato; 
 
    }

<div></div>

beide unterstützen Gradienten und/oder Bilder in den Tags html und body.

Answer 2

Dies ist nicht die sauberste Möglichkeit, aber es ist effektiv und arbeitet mit Pseudo-Elementen.

Um die Tiefe der Kurve zu ändern, ändern Sie einfach die Höhe innerhalb des Tags :after.

.chevron { 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 12px; 
 
    margin-bottom: 6px; 
 
    height: 60px; 
 
    width: 200px; 
 
    background: red; 
 
} 
 
.chevron:after { 
 
    content: ''; 
 
    width: 200px; 
 
    padding: 12px; 
 
    height: 1px; 
 
    position: absolute; 
 
    top: -12px; 
 
    left: 0; 
 
    border-radius: 50%; 
 
    border-color: white; 
 
    background: white; 
 
}

<div class="chevron"></div>