Shulou(Shulou.com)06/02 Report--

This article is about how to implement the trapezoid in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Css trapezoid method: 1, create three div elements; 2, use the border attribute to set the first and the third div element to a right triangle; 3, set the second div element to a square; 4, use the transform attribute to splice two right triangles and a square into a trapezoid.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

-- css makes a trapezoid.

Let's get this straight. Let's think about how the trapezoid is formed. As mentioned in primary school math textbooks, for example, isosceles trapezoid is composed of two right triangles and a rectangle or square. Look at the sketch ↓.

This means that we have to use a 'square' and two triangles to form a trapezoid, so is everyone's mind suddenly clear?

The square is easy to realize, so how to realize the triangle? Let's take a look at the implementation of triangles:

1. First of all, I created a div called 'box'' for class, which we affectionately called 'Little Box' for the time being.

Html:

Css:

.box {width:20px; height:20px; background-color:blue;}

Let's take a look at the effect, which is actually a normal div with a blue background.

2, then, we add four border styles to the 'small box', the width of the border is set a little bit, and the colors of the four borders are given different values, which is convenient for us to view

.box {width:50px; height:50px; background-color:blue; border-top:50px solid red; border-right:50px solid yellow; border-bottom:50px solid green; border-left:50px solid pink;}

Look at the effect, it is already a relatively gaudy existence.

3, then, we set the width and height of the 'small box' to 0px, remove the blue background color, of course, only the surrounding border, brain repair, and then we put on the code to see the effect.

.box {width:0px; height:0px; border-top:50px solid red; border-right:50px solid yellow; border-bottom:50px solid green; border-left:50px solid pink;}

Come on, get the effect, look! Children's shoes, we seem to have seen four triangles of different colors, and the next steps are very clear.

4, suppose we want an upward triangle, as long as the color of the upper, right and left borders of the 'small box' is set to transparent, only the lower border, that is, the upward triangle, is left, look!

.box {width:0px; height:0px; border-top:50px solid rgba (0re0re0re0re0); border-right:50px solid rgba (0rec 0re0re0re0re0); border-bottom:50px solid green; border-left:50px solid rgba (0mem0re0re0j0re0);}

Look at the effect! A small green upward triangle appears,\ (^ o^) /

Through the above operation, we have successfully used css to make a small triangle, is not very simple.

Without saying much, come on, let's take a look at how to realize the trapezoid.

1, first of all, make three small boxes No. 1 and No. 3 to make small triangles, and small boxes No. 2 to make a square.

Html:

Css:

.box, .box3 {width:0px; height:0px; border-top:50px solid rgba; border-right:50px solid rgba; border-bottom:50px solid green; border-left:50px solid rgba; margin-bottom:10px } .box2 {width:50px; height:50px; background-color:green;}

Let's see the effect first, ↓.

2, someone wants to ask, the shape is out, but how to spell it, here is going to use the location indication in css and the transfrom in css3. If you don't understand, there are detailed explanations in W3C. I just want to achieve the effect we want here.

3, first put all the 'small boxes' into a row, so that the block elements in a row: you can add floating float to the 'small box', or you can directly set the display:inline-block; of the 'small box' because my habit is that as long as you add a float, you have to float the parent element, which is more troublesome. I will directly set the display:inline-block of the 'small box'.

4. Finally, set the displacement of No. 1 and No. 3 small boxes to ok. See the code ↓.

.box {transform: translate (54pxMagol 10px);} .box3 {transform: translate (- 54pxMagol 10px);}

Let's see how it works, ↓.

At this point, we have used css to make the trapezoid, there are other graphics, such as parallelograms, similar things, examples, can be done in this way, I will not introduce them one by one here. Finally, I wish you all a happy study.

Thank you for reading! This is the end of the article on "how to achieve trapezoid in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.