有趣的css border 很多图形都可以做 纯html css

虽然做了一段时间前端，但自知学的都是比较基础的，要想做点有难度的还是要学习的，这不，今天就遇到了，说是得用到一个三角形，想了半天，css怎么做三角形啊。。。百度吧，大神出招，原来用的是border 原来用border 都是这么用的 border:1px solid red,哈哈 今天就给大家展示一下 border 的强大之处

1 先做一个三角形吧  

html 就是一个简单的div  

<div class="haha"></div>

主要在 css 

.haha {

    width: 0px;
    height: 0px;
    background: red;
    border-style: solid;
    border-type: solid;
    border-width: 82px;
    border-top-color: white;
    border-bottom-color: #bd4040;
    border-left-color: white;
    border-right-color: white;
}

效果

2  菱形

css

.haha{

   margin-top: 49px;
    margin-left: 100px;
    border-color: red;
    border-style: solid;
    border-width: 49px;
    width: 0px;
    height: 0px;
    -moz-transform: rotate(45deg);
    /* -webkit-transform: rotate(45deg); */
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

}

 

3 扇形 

css

.haha{

    width: 0px;
    height: 0px;
    background: red;
    border-style: dashed;
    border-type: solid;
    border-width: 82px;
    border-top-color: #bd4040;
    border-bottom-color: white;
    border-radius: 102px;
    border-left-color: white;
    border-right-color: white;

}

4 彩色的圆形

.haha{

    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 100px;
    width: 0px;
    height: 0px;
    background: red;
    border-style: dashed;
    border-type: solid;
    border-width: 82px;
    border-top-color: #bd4040;
    border-bottom-color: #a9b733;
    border-radius: 102px;
    border-left-color: #1ad0ae;
    border-right-color: #e837aa;

}

5 剩下的大家就自己尝试吧