Clever use of css border_html/css_WEB-ITnose-HTML Tutorial-php.cn

Clever use of css border_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:02:29

Original

1070 people have browsed it

There is a smooth diagonal line at the intersection of the upper, lower, left and right borders. Using this feature, you can get small triangles, trapezoids, etc. by setting different widths or colors of the upper, lower, left, and right borders.

Adjust the width to adjust the triangle shape.

Implementing triangles

Example 1:

#test1{    height:20px;    width:20px;    border-color:#FF9600 #3366ff #12ad2a #f0ed7a;    border-style:solid;    border-width:20px;}

Copy after login

Example 2:

Based on the above, when the height and width are set to 0, a border slash will appear.

#test2 {    height:0;    width:0;    overflow: hidden; /* 这里设置overflow, font-size, line-height */    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;    border-style:solid;    border-width:20px;}

Copy after login

Example 3:

In Example 2, you can see that there are 4 triangles. If 4 colors, keep only one color, and set the remaining 3 colors to be transparent or the same as the background color, then form a triangle.

#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;}

Copy after login

Example 4:

In Example 3, under IE6, you need to set the remaining three sides If the border-style is dashed, a transparent effect can be achieved.

#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;}

Copy after login

Example 5:

The hypotenuses of the small triangles drawn above all rely on the sides of the original box, and there is another form of small triangle, The hypotenuse is on the diagonal 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 ;}

Copy after login

Keeping one of the colors will give you a triangle with the hypotenuse on the diagonal.

Achieve rounded corners effect

Can achieve approximate rounded corners, which is actually displayed by a very small trapezoid.

<!DOCTYPE HTML><html><head><style type="text/css">.test{width:200px;height:50px;}.test .top{width:194px;border-color:transparent transparent #FF9600 transparent;*border-color:pink pink #FF9600 pink;border-style:dashed dashed solid dashed;border-width:3px;filter:chroma(color=pink);}.test .center{width:200px;height:40px;background-color:#FF9600;}.test .bottom{width:194px;height:5px;border-color:#FF9600 transparent transparent transparent;*border-color:#FF9600 pink pink pink;border-style:solid dashed dashed dashed;border-width:3px;filter:chroma(color=pink);}</style></head><body><div class="test">  <div class="top">  </div>  <div class="center"></div>  <div class="bottom">  </div></div></body></html>

Copy after login