当前位置:Gxlcms > html代码 > 用css制作三角

用css制作三角

时间:2021-07-01 10:21:17 帮助过:24人阅读

html代码:

css代码:

.div{
border-top:40px solid #ff0077;
border-left:40px solid #004444;
border-bottom:40px solid #999999;
border-right:40px solid #333333;
height: 0px;
width: 0px;
}

效果:

现在一个一个分解出来

html代码:




css代码:

.triggle-top,.triggle-left,.triggle-bottom,.triggle-right{
border:100px solid transparent;
height: 0;
width: 0;
}
.triggle-top{
border-top-color:#ff0077;
}
.triggle-left{
border-left-color:#004444;
}
.triggle-bottom{
border-bottom-color:#999999;
}
.triggle-right{
border-right-color: #333333;
}

效果图:

总之:制作小三角是利用border属性来制作的

额外:

还有我想说的就是一般一个标签比如:

这个删除x可以用:after{content:'x'}来实现

人气教程排行