Cách tạo hình dạng Chevron tròn

Question

Tôi đang cố gắng tạo hình chữ V bằng cách sử dụng CSS có đầu tròn (cạnh trên, thay vì hình tam giác), nhưng không thể đạt được điều này. Có ai giúp được không? 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

Một tròn chevron hey? Một cái gì đó như thế này?

Tôi đã đạt được điều này bằng cách sử dụng phần tử giả và độ dốc xuyên tâm.

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

---

Một thay thế sẽ được sử dụng một giá trị hộp bóng cao thay vào đó, sử dụng màu sắc hộp bóng các yếu tố giả như màu sắc là yếu tố chính của cũng như:

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>

cả hai đều hỗ trợ độ dốc và/hoặc hình ảnh trong thẻ html và thẻ body.

Answer 2

Đây không phải là cách sạch nhất nhưng hiệu quả và hoạt động khi sử dụng các phần tử giả.

Để thay đổi độ sâu của đường cong, chỉ cần thay đổi chiều cao trong thẻ :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>