Create common graphics using the border-radius property in CSS3

CSS3 has added many new attributes, some of which are very practical. They not only improve work efficiency, but also make the page look better. For example, the border-radius property in CSS3, we can use it to draw some commonly used graphics, thus reducing the burden on artists. This article will share with you how to use the border-radius attribute to create a perfect circle, semicircle, sector, and arc. Friends who are interested can take a look, I hope it can help you.

1. Use border-radius to make a perfect circle

The four values ​​of the border-radius attribute represent: upper left corner, upper right corner, lower right corner, lower left corner, If only one value is set, it means that the four corners are the same size. When we draw a circle, we only need to set the four corner values ​​to half the length of the div. The length and width of the div are both 200px, and the four corner values ​​are 50% (here, 100px). The code is as follows:

div{
    width: 200px;
    height: 200px;
    background: orangered;
    border-radius: 50%;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

Rendering:

2. Use border-radius to make a semicircle

Semicircle The upper left corner and upper right corner are rounded corners, and the lower right corner and lower left corner are right angles. Set the values ​​in the upper left corner and upper right corner to half the length of the div, and leave the values ​​in the lower right corner and lower left corner unchanged to 0; in addition, set the height value to half the original height to be a standard semicircle. The code is as follows:

div{
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px 100px 0 0;
    line-height: 100px;
    text-align: center;
    font-size: 40px;
    }

Rendering:

3. Use border-radius to make a fan-shaped

fan-shaped one The upper left corner is rounded, and the other three corners are right angles. Just set the value of the upper left corner to the same value as the width and height, and leave the values ​​of the other three corners unchanged (equal to 0). The code is as follows:

div{
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 200px 0 0;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

Rendering:

4. Use border-radius to make an arc

Arc Its two opposite angles change, but the other two opposite angles remain unchanged. Set its upper left corner and lower right corner to the same value as the width and height, and leave the upper right corner and lower left corner unchanged (equal to 0). Also add a transform attribute to rotate it into a flat arc. The code is as follows:

div{
    width: 200px;
    height: 200px;
    background: red;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
    border-radius: 200px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
   }

Rendering:

The above introduces some practical skills of the border-radius attribute in CSS3, which we can use when laying out the page. It draws some simple graphics. Friends who are interested can try it themselves to see if they can create other good-looking effects.

The above is the detailed content of Create common graphics using the border-radius property in CSS3. For more information, please follow other related articles on the PHP Chinese website!