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](https://stackoverflow.com/a/37557867/9050912) — Cem Firat, Feb 16 '23 at 09:39

score 3 · Answer 1 · answered Feb 12 '23 at 20:26

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>

Angled edge with CSS clip path and rounded corners

1 Answers1