How to make radial corners in `clip-path` look clean?

Question

I’m trying to make a login form with an unusual shape, but I’m struggling with the border-radius on a <div> with a clip-path.

This is the CSS I used on a <div>:

background: red;
height: 80%;
-webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
clip-path: polygon(100% 0, 0 0, 100% 100%);
border-radius: 5em;

It currently looks like this:

As you can see, the border-radius in the upper-left and lower-right corners are cut off. Is there a workaround to make this clean?

Instead of the corners being cut off I'd like them to be as shown in the image below.

@Xufox I added a picture showcasing the desired result, I hope it's clear to understand. Thanks for improving this post — Merijn
– Merijn, Commented Jul 31, 2018 at 15:39
Looks like you'll need to make the clip-path a lot more detailed (to have dozens or even hundreds of points very close to each other). — Peter B
– Peter B, Commented Jul 31, 2018 at 15:41
I'd be thinking of an SVG for this, Pretty sure it would be too involved for a CSS clip-path. Polygons don't have curves as such...just sides. — Paulie_D
– Paulie_D, Commented Jul 31, 2018 at 16:02

Mohammad · Accepted Answer · 2018-12-24 14:05:27Z

0

Try this:

.block {
  background: red;
  height: 300px;
  width: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
  border-radius: 10px;
}

 <div class="block"></div>

answered Dec 24, 2018 at 14:05

Mohammad

263 bronze badges

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

Comments

Dealenx · Accepted Answer · 2022-02-01 06:18:25Z

This article is helpful: dev.to/afif/css-shapes-with-rounded-corners-56h

Your example:

.block {
  display:inline-block;
  width:460px;
  height: 500px;
  color:red;
  margin:20px;
  filter:url(#round);
  backgroudn: red;
}
.block::before {
   content:"";
   display:block;
   padding-top:100%;
   background: red;
 
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

<div class="block"></div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="round">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

If you want to change the value of radial corners then change the attribute stdDeviation in SVG tag.

The solution has one problem is to display incorrect for IOS

I suggest you to use SVG for similar geometry

Collectives™ on Stack Overflow

How to make radial corners in `clip-path` look clean?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related