.border-up{width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid #333;position: relative;margin: 0px auto;}
.border-up span{display: block; width: 0;height: 0;border-left: 96px solid transparent;border-right: 96px solid transparent;border-bottom: 96px solid #FFFFFF;position: absolute;left: -96px;top: 2px;}
.border-down{width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-top: 100px solid #333;position: relative;margin: 0px auto;}
.border-down span{display: block;width: 0;height: 0;border-left: 96px solid transparent;border-right: 96px solid transparent;border-top: 96px solid #FFFFFF;position: absolute;left: -96px;top: -98px;}
.rectangle {
width:100px;
height:330px;
border:solid 2px;
margin:0px auto;
border-top:none;<
html5 绘制空心 三角形
最新推荐文章于 2021-06-22 11:32:46 发布