Can CSS `clip-path` Round Only Three Left Corners of a Shape?

How to Round Three Left Corners Only Using CSS clip-path

Creating shapes using CSS clip-path can be a versatile way to achieve various designs. However, rounding out specific corners can be challenging. This article addresses the issue of rounding the leftmost three corners of a custom shape.

Problem:
Consider the following HTML and CSS code:

<div></div>

div {
  position: absolute;
  z-index: 1;
  width: 423px;
  height: 90px;
  background-color: #b0102d;
  color: white;
  right: 0;
  margin-top: 10vw;
  -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

This code creates a shape with sharp left corners and rounded right corners. To specifically round out only the three leftmost corners, we need to modify the clip-path property.

Solution:
To achieve the desired effect, we can utilize the inset() function with the round property:

-webkit-clip-path: inset(0% 45% 0% 45% round 10px);
clip-path: inset(0% 45% 0% 45% round 10px);

The inset() function allows us to specify the percentage of the shape to be hidden in each direction, and the round property creates rounded edges. By providing a radius of 10px to the round property, we round out the top left, bottom left, and lower middle corners.

This solution will effectively create a shape with rounded leftmost three corners while preserving the sharp right corners.

The above is the detailed content of Can CSS `clip-path` Round Only Three Left Corners of a Shape?. For more information, please follow other related articles on the PHP Chinese website!