en mi diseño, debo crear un polígono con una esquina redondeada. Como esta foto.
Quiero la última parte (35% 100%), para crear un radio de borde de 30px. ¿Cómo puedo hacerlo? Gracias de antemano por su orientación.
img { clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%); } <div class="parent"> <img src="assets/img/img-1.jpg" alt=""> </div>Use sesgo para crear tal efecto:
.box { width: 70%; margin-left: auto; border-bottom-left-radius: 30px; overflow: hidden; transform-origin: top; transform: skewX(20deg); } .box img { display: block; width: 100%; transform-origin: inherit; transform: skewX(-20deg); /* the opposite value here */ } .wrapper { overflow: hidden; } <div class="wrapper"> <div class="box"> <img src="https://picsum.photos/id/1069/500/200"> </div> </div>