Shapes in CSS3

 Shapes in CSS3

CSS3 provides several new properties and values for creating shapes on your web page. You can use these features to create interesting and unique layouts and designs.

html

<div class="shape"></div>

css

.shape {

  width: 0;

  height: 0;

  border-top: 50px solid red;

  border-right: 50px solid transparent;

  border-bottom: 50px solid transparent;

}

In this example, we have created a triangle shape using the border property. We have set the width and height of the shape to 0, and used the border-top, border-right, and border-bottom properties to create the triangle shape. We have also set the border color to red to make the shape more visible.