border特性--构造不同的三角形

• border误区，误以为border是矩形边框，实际border为三角形边框，通常我们设置的边框border-width太小，所以不易观察border形状。当border-width足够大时，会发现border是三角形边框。

html代码

 <div class="border"></div>
 

css代码

  /* border是由三角形组成，并非矩形边 */
        .border{
            width: 50px;
            height: 50px;
            background-color: black;
            border-style: solid;
            border-width: 100px;
            border-top-color: red;
            border-right-color: blue;
            border-bottom-color: green;
            border-left-color: gray;
        }

• 故当div元素宽度和高度为0时会变成由四个三角形组成的形状，其中高为border-top+border-bottom的和，宽为border-left和border-right的和。

html代码

   <div class="triangle"></div>
 

css代码

  .triangle{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 100px;
            border-top-color: red;
            border-right-color: blue;
            border-bottom-color: green;
            border-left-color: gray;
        }

• 由此特性可以形成多样的三角形。当设置border-top为0时，就没有了水平中心线以上的border，只有水平中心线以下的半个矩形，当设置border-left和border-right颜色为透明时便只有剩下一个三角形。

html代码

  <div class="one-triangle"></div>

css代码

  /* 三角形 */
        .one-triangle{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 0px 100px 100px;
            border-color: white white red;
        }

• 基于上诉理论，可形成不同的三角形样式；左直角三角形，由直角三角形等。

html代码

<div class="left-angle"></div>
    <div class="right-angle"></div>
    <div class="right-angle1"></div>

css代码

    /* 左直角三角形*/
        .left-angle{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width:100px;
            border-color:transparent transparent yellow yellow;
        }

        /* 下左*/
        .right-angle{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width:100px 0px 0px 100px;
            border-color: red transparent transparent blue ;
        }
        /* 上左 */
        .right-angle1{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-color: green red;
            border-width: 100px 100px 0px 0px;
        }

• 最后一个实操题，综合利用css属性以及border的特性形成一个自定义带三角形的视图。元素通过border生成三角形，同时此利用伪元素的方式生成另一个三角形，子三角形覆盖父三角形，在进行定位的方式，产生一个具有边框的三角形。父元素同需要定位的元素进行定位实现效果即可。

html代码

 <div class="dialog">
        <span class="dialog-triangle"></span>
        <div>I am custom dialog</div>
    </div>

css代码

        /* 三角形用伪元素实现边框和对话框*/
        .dialog{
            width: 100px;
            height: 100px;
            border: 1px solid #333;
            position: relative;
            background-color: green;
            color: white;
            font-size: 15px;
            text-align: center;

        }
        .dialog span.dialog-triangle{
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 0px 10px 10px 10px;
            border-color: transparent transparent #333 ;
            position: absolute;
            top: -10px;
            left: 50%;
            margin-left: -10px;
        }
        .dialog span.dialog-triangle::after{
            display: block;
            content: "";
            border-style: solid;
            border-width: 0px 10px 10px;
            border-color: transparent transparent green;
            position: absolute;
            top: 1px;
            left:-10px;
        }
        /* 设置文本垂直水平居中 */
        .dialog div{
            height: 70px;
            width: 70px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -35px;
            margin-top: -35px;
        }