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

用纯css写三角形

2015-03-30 23:45 127 查看
正三角:

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: transparent transparent red transparent;border-style:dashed dashed solid dashed;}

倒三角:

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: red transparent transparent transparent;border-style: solid dashed dashed dashed;}

左三角:

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: transparent red transparent transparent;border-style: dashed solid dashed dashed;}

右三角:

.sanjiao{width:0;height:0;overflow:hidden;border-width:10px;border-color: transparent transparent transparent red;border-style: dashed dashed dashed solid;}

对三角形的高度进行控制:

.triangle{width:0;height:0;overflow:hidden;border-top: 5px solid transparent; border-bottom: 5px solid transparent;border-left: 8px solid #c40000;}

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: