0
309
ViewsNo se puede tener un div con una esquina afilada en lugar de obtenerlo como una esquina redondeada
Estoy tratando de tener un div de corte agudo en la parte superior derecha, pero en su lugar estoy usando el radio del borde superior derecho
Obtengo una esquina redondeada en la parte superior derecha.
¿Cómo podemos lograr esto usando solo CSS?
Actualmente, lo que obtengo son esquinas redondeadas, las esquinas redondeadas que obtengo con el siguiente código
Enlace de sandbox de código: - Sandbox
.container { width: 150px; height: 150px; position: relative; margin: 30px; } .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; background: #0057e3; } .overlay { z-index: 9; background: red; border-top-right-radius: 65px; } <div class="container"> <div class="box"></div> <div class="box overlay"></div> </div>En cambio, cómo necesito que el div sea esquinas afiladas
¿Cómo puedo hacer que el div tenga esquinas afiladas solo en la parte superior derecha?
3 answers
Answer question0
Podemos usar antes o después del elemento psuedo para lograr este efecto. 
HTML
<div> <h1>Hello</h1> <div class="container"> <div class="box"></div> </div> </div>CSS
.box { width: 100%; height: 100%; position: relative; opacity: 0.7; background: #0057e3; border-radius: 10px; overflow: hidden; } .box::before { content: ""; position: absolute; top: -45px; right: -45px; width: 200px; height: 30px; transform: rotate(45deg); background: red; }0
Puede usar clip-path en lugar de una esquina redondeada.
Aquí está el HTML/CSS de su código con solo esa modificación:
html, body { font-family: sans-serif; h1 { color: tomato; } } .container { width: 150px; height: 150px; position: relative; margin: 30px; } .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; background: #0057e3; } .overlay { z-index: 9; background: red; /*border-top-right-radius: 65px;*/ clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); } <div class="container"> <div class="box"></div> <div class="box overlay"></div> </div>0
No puede tener esquinas afiladas en CSS puro usando el border-radius
Una solución es usar -webkit-mask
.overlay { -webkit-mask: linear-gradient(to top right, #FFF 85%, #ffffff00 85%) top left; background: hotpink; position:absolute; width:100%; height:100%: } div { width:200px; height:200px; position: relative; background: cyan; } <div> <div class='overlay'> Corner using webkit-mask </div> </div>Revisa esto para más detalles