Tworzenie zaokrąglonego kształtu Chevron

Question

Próbuję utworzyć kształt szewronu za pomocą CSS z zaokrągloną głowicą (górna krawędź, zamiast trójkąta), ale nie jestem w stanie tego osiągnąć. Czy ktoś może pomóc? 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

Zaokrąglony Chevron, hej? Coś takiego?

Osiągnąłem to używając pseudoelementu i gradientu radialnego.

.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>

---

Alternatywą może być wykorzystanie wartości wysokiego cienie skrzyni, zamiast za pomocą cień biletowej elementu pseudo za koloru jak kolor elementu głównego, a także:

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>

oba obsługują gradienty i/lub obrazy w znacznikach HTML i body.

Answer 2

To nie jest najczystszy ze sposobów, ale działa efektywnie i działa przy użyciu pseudoelementów.

Aby zmienić głębokość krzywej, wystarczy zmienić wysokość wewnątrz znacznika :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>