Article introduction of Wulin.com (www.vevb.com): Learn a little bit of Html5+Css3 every day, accumulate experience slowly, and start from the basics. The following mainly introduces drawing simple player buttons.
Learn a little bit of Html5+Css3 every day, accumulate experience slowly, and start from the basics. The following mainly introduces drawing simple player buttons;
First, let’s see what the setting border looks like when the width and height of the DIV are 0?
The code is as follows:
1
The operation renderings are as follows:
So, can we see something from this picture?
If we remove three of the borders, can we draw a triangle? The answer is yes. With just one code, you can draw a triangle:
Effect:
Now it is easy to draw the player button. Combined with some tips of learning notes, and a little bit of adapting the code to draw the triangle above, it is easy to draw the last player button.
The code is as follows:
1
Player button
Effect:
Summary: This simple example mainly uses the use of borders to draw triangles, and slightly transform, such as changing the width of the border or the size of the div, to draw some other basic graphics. In addition, rounded corners, shadows, and graphics transformations in CSS3 are also used.