[CSS] CSS draws rectangles, circles, semi-circles, arcs, semi-circles, small triangles, question boxes, and css rectangles.

[CSS] CSS draws rectangles, circles, semi-circles, arcs, semi-circles, small triangles, question boxes, and css rectangles.

In web pages, various icons are often used. If you are always in trouble designing lion images, you may feel a little embarrassed. So sometimes we can use CSS to write various simple shapes, this can reduce the burden on them, or use CSS to replace images to increase the loading speed.

In a webpage, the most basic shape that can be drawn with CSS is a rectangle. Therefore, we can make various transformations Based on the rectangle to get many different shapes.

This sharing mainly uses knowledge points such as rounded corners, borders, and positioning (considering that corner corners are supported by IE9 or above, compatibility issues are not considered for the moment)

First, make some general basic settings:

div {width: 100px;height: 100px;line-height: 100px;text-align: center;margin: 100px;background-color: red;}

Without a doubt, you can use HTML to draw the most basic Rectangle:

<Div> rectangle </div>

Effect:

The following changes the rectangle:

Circle:

<Div class = "circle"> circle </div>

The four values of the border-radius rounded corner are in order: top left, top right, bottom right, and bottom left.

Principle: The four corners are rounded corners: the four corners are 50% or the same width and height (100px ).

.circle {border-radius: 50%;}

Semi circle:

<Div class = "semi-circle"> semi-circle </div>

Principle: The upper left and upper right corner are rounded corners, and the lower right and lower left are right angles: the value in the upper left corner and the upper right corner is the same as the width and height, and the value in the lower right and lower left remains unchanged (equal to 0, it is also necessary to set the height value to half of the original height to the standard half circle.

.semi-circle {border-radius: 100px 100px 0 0;height: 50px;}

Slice:

<Div class = "sector"> slice </div>

Principle: The upper left corner is the rounded corner, and the other three corners are the right corner. The value in the upper left corner is the same as the width and height. The value of the other three corners remains unchanged (equal to 0 ).

.sector {border-radius: 100px 0 0;}

Arc:

<Div class = "arc"> arc </div>

Principle: two diagonal changes and the other two diagonal changes: for example, the values in the upper left and lower right corner are the same as the width and height, and the values in the upper right and lower left are unchanged (equal to 0 ). the transform attribute can be rotated to a flattened arc shape, similar to a person's mouth shape, (* ^__ ^ ......

.arc{border-radius: 100px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}

Triangle:

<div class="triangle"></div><div class="arrow"></div>

Principle: Set the border and set the width and height of the original div to 0. That is, compress the original rectangle into a border, but because the set border value is relatively large (to ensure that the triangle does not look too small or too small), and then set the color of each border to be different, we can see that the triangle can actually be transformed from the border. If you only want to display a triangle, you can set other border colors to transparent, that is, transparent.

. Triangle {border: 50px solid green; width: 0; height: 0; border-top-color: yellow; border-right-color: blue; border-bottom-color: pink; border-left-color: orange ;}. arrow {background: none;/* to clear the background color set for the previous div */border: 50px solid red; width: 0; height: 0; border-color: red transparent ;}

Question Box:

<Div class = "rectangle"> Question Box </div>

Principle: it consists of a rounded rectangle and a small triangle: it can be realized by combining pseudo elements and positioning.

/* Rounded rectangle */. rectangle {width: 200px; border-radius: 15px; position: relative;}/* small triangle */. rectangle: before {content: ""; width: 0; height: 0; border: 15px solid red; border-color: red transparent; position: absolute; bottom: -30px; left: 40px ;}

Author: Zhizhi

Sign: The road is long, and I will go up and down.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.