江苏龙网

  1. 主页 > 生活百科 > >

CSS是什么？这一篇全解，绝对有你想要的( 五 )

css


CSS是什么？这一篇全解，绝对有你想要的

文章插图
 
边框实现各种三角符号：
CSS是什么？这一篇全解，绝对有你想要的

文章插图
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .triangle-one {            display: inline-block;            border-top: 50px red solid;            border-right: 50px green solid;            border-bottom: 50px yellow solid;            border-left: 50px blue solid;        }        .triangle-two {            display: inline-block;            border-top: 0 red solid;            border-right: 50px green solid;            border-bottom: 50px yellow solid;            border-left: 50px blue solid;        }        .triangle-stree {            display: inline-block;            border-top: 50px red solid;            border-right: 0 green solid;            border-bottom: 50px yellow solid;            border-left: 50px blue solid;        }        .triangle-four {            display: inline-block;            border-top: 50px red solid;            border-right: 0 green solid;            border-bottom: 0 yellow solid;            border-left: 50px blue solid;        }         .triangle-five {            display: inline-block;            border: 50px transparent solid;            border-top: 50px red solid;        }        .triangle-six {            display: inline-block;            border: 50px transparent solid;            border-bottom: 50px yellow solid;        }        .triangle-seven {            display: inline-block;            border: 50px transparent solid;            border-top: 60px red solid;            border-right: 0;        }        .triangle-eight {            display: inline-block;            border: 50px transparent solid;            border-left: 30px yellow solid;            border-bottom: 0;        }    </style></head><body>    <div class="triangle-one"></div>    <div class="triangle-two"></div>    <div class="triangle-stree"></div>    <div class="triangle-four"></div>    <div class="triangle-five"></div>    <div class="triangle-six"></div>    <div class="triangle-seven"></div>    <div class="triangle-eight"></div></body></html>


推荐阅读


上一篇：尼斯湖水尼斯湖水怪 英国尼斯湖水怪传说

下一篇：发小和闺蜜哪个更重要 发小和闺蜜的意思一样吗