当前位置: 首页 > Web前端 > CSS

四个三角形的实现

时间:2023-03-30 23:12:09 CSS

(下面是训练中的一个小作业,方法很多,这是我自己写的方法之一。)1.给正三角形添加边框

.tiangle1{宽度:0;高度:0;边框宽度:050px50px;border-color:透明透明红色;border-style:solid;}2.带边框三角形的实现
.tiangle2{width:0;高度:0;边框宽度:050px50px;border-color:透明透明黑色;边框样式:实心;边距顶部:40px;位置:相对}.tiangle2::after{位置:绝对;内容:””;顶部:3px;左:-45px;宽度:0;高度:0;边框宽度:045px45px;border-color:透明透明黄色;边框样式:实心;}3.下标实现方法
.tiangle3{width:60px;高度:60px;border-right:1pxsolid#000;border-bottom:1pxsolid#000;变换:旋转(-133deg);边距:40px;}4。直角三角形的实现
.tiangle4{width:0;高度:0;边框-width:050px50px;border-color:透明透明粉色;边框样式:实心;变换:旋转(-133deg)}