search

Home >Web Front-end >HTML Tutorial >Clever use of css border_html/css_WEB-ITnose

Clever use of css border_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:02:291065browse

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

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

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

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

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

    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>

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：[websocet] Can the handshake be successful if written like this? _html/css_WEB-ITnoseNext article：[websocet] Can the handshake be successful if written like this? _html/css_WEB-ITnose

    Related articles

    See more