0
130
Viewshow to create a rounded corner for the picture(img tag) in clip-path polygon in CSS
in my design, I must create a polygon with a rounded corner. like this picture.
I want the last part (35% 100%), to create a border-radius of 30px.
how can I do it?
Thanks in advance for your guidance.
img {
clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%);
}<div class="parent">
<img src="assets/img/img-1.jpg" alt="">
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
Use skew to create such effect:
.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>
·
Juan Pablo Isaza
Report
Answer question