css實(shí)現(xiàn)倒三角的最簡(jiǎn)單方法
1. css邊框：
html：
<div class="h"></div>
css:
.h{
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top-color: red;
}
最終呈現(xiàn)結(jié)果：
image-20210907150453840.png
如果想要其它方向的三角蓄喇，很簡(jiǎn)單，直接改成border-left-color吃粒，border-right-color或者border-bottom-color即可。如果想要其它形狀的倒三角，可以隨意調(diào)整以下任意邊框的高度：
.h{
width: 0;
height: 0;
border-left: 34px solid transparent;
border-right: 40px solid transparent;
border-top: 80px solid red;
}
2.旋轉(zhuǎn)正方形
html:
<div class="r">
<div class="rr"></div>
</div>
css:
.r{
height: 14px;
overflow: hidden;
}
.rr{
position: relative;
height: 20px;
width: 12px;
top: -12px;
left: 7px;
background: #0c0c0c;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
最終呈現(xiàn)結(jié)果
image-20210907171223284.png
其實(shí)它的主要原理是父元素將子元素不需要的部分超出隱藏县忌，剩下倒三角形的形狀。
