CODEWITHSUNDEEP
javascripthtmlcss
h.m.p.frontendDeveloper
h.m.p.frontendDeveloper

Reputation: 505

how 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.enter image description here 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>

Upvotes: 0

Views: 753

Answers (1)

Temani Afif
Temani Afif

Reputation: 272608

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>

Upvotes: 3

Related Questions