Home > Developer > Web Develop
Preface: Do you know? You can use the code to make triangles, circles, fans, and so on. Come and get a look at it!
Some simple graphics on the page, such as triangles, circles and so on, in addition to the use of images to achieve, we can also use CSS border properties to achieve, not only reduce the memory footprint, the operation of the graphics more flexible.
Next we'll take a step-by-step look at how these geometries are implemented.
This article lists some common geometries, and more geometries are available on GitHub for download.
Project GitHub Address: Https://github.com/ichengll/C-heart
Don't say much, let's start.
Directory:
First, trapezoid
Two or three angle shape
Three, round
Four, Oval
Five, cylindrical shape
Six, fan
Seven, semicircular
Eight, ribbons
First, trapezoid
As we all know, using border can set the box's border, including the upper and lower borders, such as the following:
<style> . Box {width:100px; height:100px;border:10px solid #a10;} </style><body> <div class= "box" ></div></body>The effect of this implementation will not have to say, it is the following:
Next we will set the different colors for each frame with:
. box {width:100px; height:100px;border-top:60px solid blue;border-right:60px solid yellow;
border-bottom:60px solid green;border-left:60px solid pink;}I gave the box a different color for each of the four frames, to look at the effect:
Now you can see that each border is a trapezoidal shape, then how can we just let him show a trapezoid?
We set the width of the border is 50px, the box width is high 100px, now the center of the box is a square blank, we want to get trapezoid, the first to remove this blank, how to, for example, we want to get the bottom of the trapezoid, it will be the height of the box set to 0, which will be the middle of the gap removed, Then we remove the top line and set the color of the remaining lines to transparent so that we get a trapezoid. The specific code is as follows:
. box {width:100px; height:0;border-right:60px solid transparent;
border-bottom:60px solid green;border-left:60px solid transparent;}The effect is as follows:
To get to the left trapezoid, set the width of the box to 0, remove the right line, and set the color of the remaining lines to transparent color:
. box {width:0; height:100px;border-top:60px solid transparent;
border-bottom:60px solid transparent;border-left:60px solid red;}Perhaps you would ask, why set the width or height to 0, now we take the red ladder to give an example, we use the review element first to look at this trapezoid:
Next we set the width of the box to 100px, and then we look at the review element:
Do you see the difference? When the width is 0 o'clock, the trapezoidal position is only the width of the trapezoid itself, while the width is set to 100px, the trapezoid's actual occupying position is more than 100 pixel value. We set the width to 0, which is to reduce unnecessary placeholders.
We can also change the width of the border to get a different size of the trapezoid, here is not written.
Two or three angle shape
Trapezoidal and triangular principle is the same, but the width of the box is set to 0, the code is as follows:
. box {width:0; height:0;border-top:60px solid blue;border-right:60px solid yellow;
border-bottom:60px solid green;border-left:60px solid red;}Look at the effect:
To get the triangle at the bottom, write this:
. box {width:0; height:0;border-right:60px solid transparent;
border-bottom:60px solid green;border-left:60px solid transparent;}The thickness of the three border settings is the same, so we get a right triangle, if you want to get a different shape of the triangle, only need to change the thickness of the border can be.
Three, round
Round we'll use the Border-radius rounded border, here's the code:
. box {width:100px; height:100px;background-color:green;border-radius:50px;}Four, Oval
. box {width:100px; height:50px;background-color:green;border-radius:50px/25px;}Five, cylindrical shape
. box {width:100px; height:100px;background-color:green;border-radius:50px/25px;}Six, fan
. box {width:100px;height:100px;background-color:green;border-top-left-radius:100%;}Seven, semicircular
. box {width:100px;height:50px;background-color:green;border-radius:50px 50px 0 0;}Eight, ribbons
. box {width:0;height:100px;border-right:50px solid green;
border-bottom:30px solid transparent;border-left:50px solid Green;}CSS implements simple geometry
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
