Use css border and cssborder
Triangle Realization
Example 1:
#test1{ height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0ed7a; border-style:solid; border-width:20px;}
Example 2:
When the height and width are set to 0, a diagonal line is displayed.
# Test2 {height: 0; width: 0; overflow: hidden;/* overflow, font-size, line-height */font-size: 0;/* is set here because, although the width and height are 0, in IE6, the default */line-height: 0;/* font size and row height are displayed, as a result, the box is rendered with an extended long rectangle */border-color: # FF9600 # 3366ff # 12ad2a # f0eb7a; border-style: solid; border-width: 20px ;}
Example 3:
In Example 2, we can see that there are four triangles. If you keep only one color for the four colors, set the remaining three colors to transparent or the same as the background color, then a triangle is formed.
#test3 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid; border-width:20px;}
Example 4:
In Example 3, in IE6, you need to set the border-style on the remaining three sides to dashed to achieve transparent effect.
#test4 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:20px;}
Example 5:
The oblique edges of the preceding small triangle depend on the sides of the original box, and there is another form of small triangle, with the oblique edges on the diagonal lines of the box.
#test5 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 #3366ff transparent transparent; border-style:solid solid dashed dashed; border-width:40px 40px 0 0 ;}
Retain one of the colors to get the triangle with the oblique side on the diagonal line.
Achieve rounded Corner Effect
An Approximate rounded corner can be achieved, but it is actually displayed as a very small trapezoid.
<!DOCTYPE HTML>
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
