搜索
您的当前位置:首页正文

css-画一个三角形

来源:哗拓教育
<span class="triangle"></span>
.triangle {
    display: inline-block; /* 使 span 能够接受宽高 */
    width: 0; /* 宽度为 0 */
    height: 0; /* 高度为 0 */
    border-left: 50px solid transparent; /* 左边边框 */
    border-right: 50px solid transparent; /* 右边边框 */
    border-bottom: 100px solid blue; /* 底边边框的颜色(可更改为需要的颜色) */
}

1.必须时一个块级元素

2.宽高都为0;

3.左右边框 :

 border-left: 50px solid transparent; /* 左边边框 */
  border-right: 50px solid transparent; /* 右边边框 */

4.下边框: 
    border-bottom: 100px solid blue; /* 底边边框的颜色(可更改为需要的颜色) */

 

因篇幅问题不能全部显示,请点此查看更多更全内容

Top