Cutout corners

One cutout corner

1. First create your div.
2. To do this effect simply add a background: linear-gradient with a transparentcolor as first parameter and the color of your background element as a second parameter.
3. Now in your linear-gradientadd deg and play with to move your background.

Using positions

1. Add four background linear-gradient for our four sides.
2. Use ,after your linear-gradient to add many background.
3. At the end of your linear-gradientsimply add the position where you want see your backgroundand plays with deg.
4. Addbackground-sizeand play with % because having 4 backgroundcand hide the box of our elements.
5. Using background: no-repeatallow us to have only four backgroundinstead of many.

Circle corners

1. Add four radial-gradient.
2. Indicate the position by using circle at ..as first parameter.
3. Addbackground-sizeand play with % because having 4 backgroundcand hide the box of our elements.
4. Using background: no-repeatallow us to have only four backgroundinstead of many.

Using clip-path property

1. Using clip-pathand create as many as we need points.
2. The first parameter of a point is the gap on the X axis and the second on the Y axis.