利用css画一个三角形
步骤:
1、先定义一个
宽高都为0
的盒子2、设置另外三个边框的宽,颜色为透明,把想要展示的边框设为实色
html
<body> <div class="main"> <!-- 定义一个盒子 --> <div class="triangle"> </div> </div> </body>
css
.main{ background-color: aliceblue; } .triangle{ /* 设置宽高为0 */ width: 0; height: 0; /* 设置另外三个边框为透明,想要展示的边框为实色 */ border-top: 50px solid rgba(0, 0, 0, 0); border-left: 50px solid rgba(0, 0, 0, 0); border-right: 50px solid rgba(0, 0, 0, 0); border-bottom: 50px solid #0088ff; }
效果