共计 864 个字符,预计需要花费 3 分钟才能阅读完成。
(以下是在培训当中的一个小作业,办法多多,这是我本人写的其中之一办法)
1. 正三角加边框
<div class="tiangle1"></div>
.tiangle1{
width:0;
height:0;
border-width:0 50px 50px;
border-color: transparent transparent red;
border-style: solid;
}
2. 带有边框的三角实现形式
<div class="tiangle2"></div>
.tiangle2{
width:0;
height:0;
border-width:0 50px 50px;
border-color: transparent transparent black;
border-style: solid;
margin-top:40px;
position: relative
}
.tiangle2::after{
position: absolute;
content: "";
top:3px;
left:-45px;
width:0;
height:0;
border-width:0 45px 45px;
border-color: transparent transparent yellow;
border-style: solid;
}
3. 下角标实现形式
<div class="tiangle3"></div>
.tiangle3{
width:60px;
height:60px;
border-right:1px solid #000;
border-bottom:1px solid #000;
transform: rotate(-133deg);
margin: 40px;
}
4. 直角三角的实现形式
<div class="tiangle4"></div>
.tiangle4{
width:0;
height:0;
border-width:0 50px 50px;
border-color: transparent transparent pink;
border-style: solid;
transform: rotate(-133deg)
}
正文完