利用borber书写小三角

来源:互联网 发布:侠客风云传优化差 编辑:程序博客网 时间:2024/06/03 14:09

一直在忙项目,终于有时间重新来总结下css

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        .box {            width: 0;            height: 0;            margin: 40px;            border: 40px solid #fff;        }        .box1 {            border-top-color: #ffdc85;            border-bottom: none;        }        .box2{            border-left-color: #ffdc85;            border-right: none;        }        .box3{            border-right-color: #ffdc85;            border-left: none;        }        .box4{            border-bottom-color: #ffdc85;            border-top: none;        }    </style></head><body>    <div class="box box1"></div>    <div class="box box2"></div>    <div class="box box3"></div>    <div class="box box4"></div></body></html>

效果如下:
这里写图片描述