您的位置：首页 > Web前端 > CSS

css制作实心三角形

2017-04-01 09:20 633 查看
我们来一步一步实现三角形



html:

<div id="box"></div>


css:

#box {
width: 100px;
height: 100px;
border: 30px solid pink;
border-top-color: red;
}




css:

#box {
width: 30px;
height: 30px;
border: 30px solid pink;
border-top-color: red;
}




css:

#box {
width: 0;
height: 0;
border: 30px solid pink;
border-top-color: red;
}




css：

#box {
width: 0;
height: 0;
border: 30px solid #fff;
border-top-color: red;
}


另外还可以制作其他方向的三角形，只需要更改边框颜色的方向 例如：



border-left-color: red;




border-bottom-color: red;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航