CSS Border Drawing

Original

The original Book of Jane: Https://www.jianshu.com/p/537a878304f2

Outline

1, the value of Border-style
2. Drawing with border--basic graphics
3. Drawing with border--special graphics

1, the value of Border-style

<! DOCTYPE html>  
div{    width:100px;    height:100px;    border:20px Green;    Border-style:solid;}
Different Border-style values have different effects 1.1, solid: Define solid lines
1.2, double: Define two lines, the width of the two lines equals the value of Border-width
1.3. Dotted: Defines a point border, which is rendered as a solid line in most browsers
1.4. Dashed: Defines dashed lines, which are rendered as solid lines in most browsers
1.5. Groove: Defines the 3D groove border, depending on the value of the Border-color
1.6, Ridge: Define 3D Ridge border, its effect depends on the value of Border-color
1.7, inset: Define 3D inset border, its effect depends on the value of Border-color
1.8, outset: Define 3D outset border, its effect depends on the value of Border-color
2, the use of border mapping-basic graphics basic HTML files, basic graphics in this HTML div to create
<! DOCTYPE html>  
2.1. Set different colors for different borders
div{    width:100px;    height:100px;    border-top:100px solid red;    border-bottom:100px solid Orange;    border-left:100px solid Green;    border-right:100px solid Blue;}
2.2. Set the div width height to 0
div{    width:0;    height:0;    border-top:100px solid red;    border-bottom:100px solid Orange;    border-left:100px solid Green;    border-right:100px solid Blue;}
2.3, trapezoid
div{    width:100px;    height:0;    font-size:0;    line-height:0;    Overflow:hidden;    border-bottom:100px solid Orange;    border-left:100px dashed transparent;    border-right:100px dashed Transparent;}
2.4. Triangle
    /* Remember that height and width are set to 0, the width of the border controls the size of the triangle    by adjusting the color of the border in different directions and the transparency of adjacent borders to get isosceles triangle in different directions    or    you can set two adjacent borders. A display color one does not show the color thereby forming right triangle *//* isosceles triangle */div{width:0 in different directions    ;    height:0;    font-size:0;    line-height:0;    Overflow:hidden;    border-bottom:100px solid Orange;    border-left:100px dashed transparent;    border-right:100px dashed Transparent;} /* Right triangle */div{    width:0;    height:0;    font-size:0;    line-height:0;    Overflow:hidden;    border-bottom:100px solid Orange;    border-left:100px dashed Transparent;}
3, the use of border mapping--special graphics 3.1, superimposed triangles
<div class=box>    <span class= "arrow_1" ></span>    <span class= "Arrow_2" ></span> </div><!--    set two triangles in different directions to overlay triangle arrows in different directions--
. box{    position:relative;}. Box span{    width:0;    height:0;    font-size:0;    line-height:0;    Overflow:hidden;    Position:absolute;} span.arrow_1{    border-top:20px solid #beceeb;    border-left:20px dashed transparent;    border-right:20px dashed transparent;    left:80px;    bottom:-20px;    Z-index:1;} span.arrow_2{    border-top:20px solid #ffffff;    border-left:20px dashed transparent;    border-right:20px dashed transparent;    left:80px;    bottom:-13px;    Z-index:2;}
3.2. Overlay two triangles in opposite directions
<div class= "Triangle-updown" ></div>
. triangle-updown {    width:0;    height:0;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-bottom:100px solid #669;    position:relative;    Margin-bottom:50px}.triangle-updown:after {    content: "";    width:0;    height:0;    border-left:50px solid transparent;    border-right:50px solid transparent;    border-top:100px solid #669;    Position:absolute;    top:50px;    Left: -50px;}
3.3. Form the heart shape with the superposition of ellipse
. heart {    width:160px;    height:200px;    Position:relative}.heart:before {    content: "";    border:0 solid transparent;    -moz-border-radius:100px;    -webkit-border-radius:100px;    border-radius:100px 100px 0 0;    width:80px;    height:120px;    Background: #669;    -moz-transform:rotate ( -45deg);    -ms-transform:rotate ( -45deg);    -o-transform:rotate ( -45deg);    -webkit-transform:rotate ( -45deg);    Position:absolute;    left:20px;}. Heart:after {    content: "";    border:0 solid transparent;    -moz-border-radius:100px;    -webkit-border-radius:100px;    border-radius:100px 100px 0 0;    width:80px;    height:120px;    Background: #669;    -moz-transform:rotate (45deg);    -ms-transform:rotate (45deg);    -o-transform:rotate (45deg);    -webkit-transform:rotate (45deg);    Position:absolute;    left:48px;    top:0px;}
3.4, ellipse hint bubble
. oval-pop {    width:200px;    height:100px;    Background: #669;    -moz-border-radius:100px/50px;    -webkit-border-radius:100px/50px;    border-radius:100px/50px;    margin-bottom:50px;    Position:relative}.oval-pop:after {    content: "";    border:0 solid transparent;    border-bottom:30px solid #669;    -moz-border-radius:0 0 0 200px;    -webkit-border-radius:0 0 0 200px;    border-radius:0 0 0 200px;    width:50px;    height:50px;    position:relative;    margin-top:20px;    -webkit-transform:rotate ( -90deg);    -moz-transform:rotate ( -90deg);    -ms-transform:rotate ( -90deg);    -o-transform:rotate ( -90deg);    Position:absolute;    top:50px;    left:20px}
3.5. dialog box 1
<div class=box>    <span class= "arrow_1" ></span>    <span class= "Arrow_2" ></span >    hellos</div>
. box{    width:300px;    padding:30px 20px;    border:5px solid #beceeb;    Position:relative;}. Box span{    width:0;    height:0;    font-size:0;    line-height:0;    Overflow:hidden;    Position:absolute;} span.arrow_1{    border-top:20px solid #beceeb;    border-left:20px dashed transparent;    border-right:20px dashed transparent;    left:80px;    bottom:-20px;    Z-index:1;} span.arrow_2{    border-top:20px solid #ffffff;    border-left:20px dashed transparent;    border-right:20px dashed transparent;    left:80px;    bottom:-13px;    Z-index:2;}
3.6, dialog box 2--pseudo-Class
<div class=box>    <span>hellos</span></div>
. box{    width:300px;    padding:30px 20px;    border:5px solid #beceeb;    Position:relative;}. box:after,.box:before{    content: ";    width:0;    height:0;    font-size:0;    line-height:0;    Overflow:hidden;    Position:absolute;}. box:after{    border-top:20px solid #beceeb;    border-left:20px dashed transparent;    border-right:20px dashed transparent;    left:80px;    bottom:-20px;    Z-index:1;}. box:before{    border-top:20px solid #ffffff;    border-left:20px dashed transparent;    border-right:20px dashed transparent;    left:80px;    bottom:-13px;    Z-index:2;}
Reference URL
Https://www.cnblogs.com/wanghuih/p/5836635.html
Http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html
Https://www.w3cplus.com/css/create-shapes-with-css
CSS Border Drawing