How to achieve a rounded arc? Triangle and a circle with css

Videos with css rectangular with rounded corners, the need to use the border-radius attribute, the FIG corners round, the code is shown below: border-radius: 60px; width: 360px; height: 200px; border: # 900 1px solid; margin: 20px 20px ;

 

 You can also control attribute border-radius of the arcuate upper left corner and lower right corner arcuate, mostly border-top-left-radius and border-bottom-right-radius.

 

 When the border-radius value and the width, height, etc. to achieve a certain relationship, it can be directly displayed circle. border-radius: 400px; width: 200px; height: 200px; border: # 900 1px solid;

 

 If the triangle to do, it is necessary to proceed from the transparent border, for example, FIG border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

 

 In fact, border-left: 50px solid transparent; width directly affects the triangular shape as described above into the border-left: 150px solid transparent; pattern obtained as follows

 

 According to some of the property transparent border can be controlled toward the arrow. Made up arrow, down arrow, right arrow, and left arrow, FIG follows.

 

 

Guess you like

Origin www.cnblogs.com/zmdComeOn/p/11921135.html