How to Create Inverted Scooped Corners in CSS Using Box-Shadow?

Creating Inverted Scooped Corners with CSS

In your current CSS code, you aim to create inverted scooped corners. The provided code utilizes border-radius to achieve a rounded corner effect. However, to create a concave radius, we can leverage the box-shadow property.

The technique involves the following steps:

1. Create a transparent square with overflow hidden using CSS.
2. Add a transparent circle to the square using a box shadow.
3. Position the circle strategically to reveal only a quarter of its circumference.

This approach provides a solution for creating concaved corners. Below is an example snippet to illustrate the method:

  position: relative;<br>  width: 200px;<br>  height: 50px;<br>  background-color: blue;<br>  border-radius: 9999px 0 0 9999px;<br>  margin: 30px;<br>  text-align: center;<br>  color: #fff;<br>  padding-top: 10px;<br>}</p><h1>top,</h1><h1>bottom {</h1><p>position: absolute;<br>  height: 30px;<br>  width: 30px;<br>  right: 0;<br>  overflow: hidden;<br>}</p><h1>top {</h1><p>top: -30px;<br>}</p><h1>bottom {</h1><p>bottom: -30px;<br>}</p><h1>top::before,</h1><h1>bottom::before {</h1><p>content: '';<br>  position: absolute;<br>  right: 0;<br>  height: 200%;<br>  width: 200%;<br>  border-radius: 100%;<br>  box-shadow: 10px 10px 5px 100px blue;<br>  z-index: -1;<br>}</p><h1>top::before {</h1><p>top: -100%;<br>}

In this code, we combine the square with overflow hidden and the circle with box shadow to achieve the desired concave radius effect.

The above is the detailed content of How to Create Inverted Scooped Corners in CSS Using Box-Shadow?. For more information, please follow other related articles on the PHP Chinese website!