Html Question posted in
Some basic documentation can be found here.

Html – Custom rounded shape CSS

I’m trying to draw a custom shape with rounded corners using CSS. Below is an image of what I have so far, but as you can see the rounded corners aren’t completely working.

Attempt at custom shape

I’ve tried using SVGs but haven’t been able to get that work work yet. Here is the code for the shape below:

.custom-shape {
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
    border-radius: 10px;
}
Tags:

2

Answers


  1. 0

    You could use two rectangle with a css skew on the second to achieve it, i’ve made the two rectangle with different color so that you can understand but if you put them both like this you can create your shape.

    Here is my code :

    HTML :

    <div className="shape-container">
  <div className="rec"></div>
</div>

    CSS :

    .shape-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.shape-container .rec {
  height: 500px;
  width: 300px;
  border-radius: 20px;
  position: relative;
  background-color: rgb(0, 0, 0);
}
.shape-container .rec::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: grey;
  position: absolute;
  border-radius: 20px;
  transform: skew(-11deg) translateX(20%);
}

    If you want to change the angle of the right side just play with the skew value.

    Login or Signup to reply.
  2. 0

    You need to define the exact shape that you need. And if you would like rounded corners, you need to draw them. You can use any SVG or text editor to draw a shape. In this example I use the shape path() because I have been drawing a path in SvgPathEditor.

    div {
  width: 300px;
  height: 300px;
  background-color: orange;
  clip-path: path('M 30 0 A 30 30 90 0 0 0 30 V 270 A 30 30 90 0 0 30 300 H 210 A 42 30 90 0 0 240 270 L 300 30 A 30 25.5 0 0 0 270 0 Z');
}
    <div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search