Sto provando a creare una forma a chevron usando CSS con una testa arrotondata (bordo superiore, anziché triangolare), ma non in grado di ottenere ciò. Qualcuno può aiutare? Demo here.Come creare una forma arrotondata di Chevron
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);
}
arrotondato chevron, eh? Qualcosa come questo?
Ho raggiunto questo utilizzando uno pseudo elemento e un gradiente radiale.
.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>Un'alternativa sarebbe quella di utilizzare un elevato valore ombre scatola invece, utilizzando il colore scatola ombra dell'elemento pseudo come colore dell'elemento principale così:
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>entrambi supportano gradienti e/o immagini nei tag html e body.
Questo mi ha aiutato molto. Grazie! – undroid
nessun problema. Se steste pensando di andare per una galloni tinta unita, vorrei andare per l'ultima parte della mia risposta. – jbutler483
Questo non è il più pulito dei modi, ma è efficace e funziona utilizzando pseudo-elementi.
Per modificare la profondità della curva, è sufficiente modificare l'altezza all'interno del tag :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>
si intende un pieno semicerchio sulla parte superiore o solo la punta? – Harry
Non direi un semicerchio completo, ma una cima rotonda. Una leggera testa arrotondata. – undroid
Ti piace questo https://jsfiddle.net/897ty4bx/1/? – lmgonzalves