Angled edge with CSS clip path and rounded corners

Question

Goal: All corners of the rectangle should be round.

Problem: The lower right corner is angular because I have slightly sharpened the edge with CSS Clip path.

Questions: 1. what do I have to do to round the lower right corner? 2. is Clip Path possibly the wrong way to implement what I want?

section {
  background: gray;
  height:100vh;
  padding:10px;
}
.block {
  background: green;
  padding: 10px 10px 50px 10px;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  border-radius: 10px;
}

<section>
  <div class="block">
    <div>lorem ipsum</div>
    <div>lorem ipsum</div>
    <div>lorem ipsum</div>
    <div>lorem ipsum</div>
  </div>
</section>

I prefer to use an SVG shape in this case. More flexibility in design, can be combined, animated and can also be used as a background. Details — Cem Firat
– Cem Firat, Commented Feb 16, 2023 at 9:39

Temani Afif · Accepted Answer · 2023-02-12 20:26:15Z

3

a skew transform combined with pseudo element can do it:

section {
  background: gray;
  height: 100vh;
  padding: 10px;
}

.block {
  padding: 10px 10px 50px 10px;
  border-radius: 10px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.block:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: green;
  border-radius: inherit;
  transform-origin: left;
  transform: skewY(-2deg);
}

<section>
  <div class="block">
    <div>lorem ipsum</div>
    <div>lorem ipsum</div>
    <div>lorem ipsum</div>
    <div>lorem ipsum</div>
  </div>
</section>

answered Feb 12, 2023 at 20:26

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cem Firat Over a year ago

Easiest way to the goal

Collectives™ on Stack Overflow

Angled edge with CSS clip path and rounded corners

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related