How to Round Out Corners When Using CSS Clip-Path

How to keep border-radius when using clip-path?

Use mask not clip-path:

body{
  background-color: black;
  }

.card-oval-gradient {
  position: relative;
  width: 10rem;
  height: 6rem;
  background-color: blue;
  border-radius: 0.5rem;
  -webkit-mask: linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0);
}

.card-oval-gradient > * {
  position: relative;
  z-index: 2;
}

.card-oval-gradient:hover::before {
  content: '';

  position: absolute;
  left: -7rem;
  top: -10rem;
  width: 18rem;
  height: 28rem;
  -moz-border-radius: 15rem / 20rem;
  -webkit-border-radius: 15rem / 20rem;
  border-radius: 15rem / 20rem;
  opacity: 0.6;
  transform: scaleX(-1) rotate(61deg);
  background-image: linear-gradient(
    138deg,
    #4d3d8f 0%,
    #df67ed 23%,
    #e24c26 65%,
    #f18823 84%,
    #3aa6c2 100%
  );

  filter: blur(50px);
}

<div class="card-oval-gradient">
</div>

clip-path polygon rounded edge

I hope this helps you.
It was solved with the before pseudo-class and tranform skewy.

SCSS:

.test {
position: relative;
width: 75%;
height: 600px;
margin: 0 auto;

.bg {
  width: 100%;
  height: 483px;
  position: relative;
  overflow:hidden;
  z-index: 0;
}

.bg:before {
    content: "";
    position:  absolute;
    background: orange;
    z-index: -1;
    top:0;
    left:0;
    bottom:0;
    right:0;
    border-bottom-right-radius: 120px;
    transform: skewy(-4deg);
    transform-origin: left bottom;
  }

}

.test {  position: relative;  width: 75%;  height: 600px;  margin: 0 auto; }  .test .bg {    width: 100%;    height: 483px;    position: relative;    overflow: hidden;    z-index: 0; }  .test .bg:before {    content: "";    position: absolute;    background: orange;    z-index: -1;    top: 0;    left: 0;    bottom: 0;    right: 0;    border-bottom-right-radius: 120px;    transform: skewy(-4deg);    transform-origin: left bottom; }

<html>    <head>        <link rel="stylesheet" href="css/style.css">    </head>    <body>        <div class="test">            <div class="bg"></div>        </div>    </body></html>

How to make a rounded triangle using clip path

Instead of using a polygon as a clipping path I am using a path: a triangle with rounded corners:

.triangle {  padding: 0;  background-image: url(https://assets.codepen.io/222579/beagle400.jpg);  background-size: cover;  width:100px;  height: 100px;  -webkit-clip-path: url(#clip);  clip-path: url(#clip);}
.shadow {  filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, .4));}

<svg height="0" width="0" class="svg-clip" style="position:absolute">    <defs>         <clipPath id="clip">           <path d="M100.000,21.000 Q100,0 81.217,9.391L18.783,40.609 Q0,50 18.783,59.391L81.217,90.609 Q100,100 100.000,79.000Z" />        </clipPath>    </defs></svg> <div class="shadow">  <div class="triangle"/></div>

clip-path polygon with curve edges

Maybe another way to do that?

.curved-message {  position: relative;  width: 300px;  height: 100px;  background: lightblue;  border-radius: 15px;}.curved-message:before {  content: "";  width: 30px;  height: 30px;  background: lightblue;  position: absolute;  bottom: -15px;  left: 50%;  -webkit-transform: translateX(-50%) rotate(45deg);  transform: translateX(-50%) rotate(45deg);}

<div class="curved-message">
</div>

How to Round Out Corners When Using CSS Clip-Path

How to keep border-radius when using clip-path?

clip-path polygon rounded edge

How to make a rounded triangle using clip path

clip-path polygon with curve edges

Related Topics

Leave a reply