How CSS implements various shapes

How to implement various shapes with CSS: 1. For a circle, set the width and height to be equal when setting CSS, and then set the [border-radius] attribute to half the width or height; 2. A square is a CSS graphic One of the simplest graphics in , also uses a div and sets an ID.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to achieve various shapes with CSS:

1. Circle

To use CSS to make a circle , we need a div with an ID set to it.

<div id="circle"></div>

When setting the CSS for a circle, set the width and height to be equal, and then set the border-radius attribute to half the width or height:

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

2. Square

The square is one of the simplest graphics among CSS graphics. It also uses a div and sets an ID.

<div id="square"></div>

                                                                                                                                                             

The CSS style of the square only needs to be set to the same width and height.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

Recommended related tutorials: CSS video tutorial

The above is the detailed content of How CSS implements various shapes. For more information, please follow other related articles on the PHP Chinese website!