利用border属性来制做基本图形

利用border属性来制作图形

一，制作三角形
其CSS样式如下：

选择器  {
            /* 将宽高值设为0， */
            width: 0px;
            height: 0px;
            /* 设置边框样式 */
            border-style: solid;
            /* 设置边框粗细 */
            border-width: 12px;
            /* 设置要展示出的色块，其余设为透明色 */
            border-color: red transparent transparent transparent;
        }
        }

其中三角形的方向可以通过显示哪条边框的颜色来确定自己的方向
图形大小可以通过改变border-width:取值来决定!
最后效果如下：

二，利用border画圆
其CSS样式如下

 选择器{
          /* 设置边框 */
          width: 100px;
          height: 100px;
          /* 设置边框线 */
        border:solid 3px red;
        /* 转化为圆形 */
        border-radius: 50%;
    }

注意：width/height的值必须一致，当width/height值为“0”时，边线线框粗细值就是圆的半径。