简介
原理记忆:
三角形实现原理:宽度width为0;height为0;
(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。指的是:triangleUp、triangleDown、triangleLeft、triangleRight
(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。指的是:triangleTopLeft、triangleTopRight、triangleBottomLeft、triangleBottomRight
html
<div id="triangleUp">
triangleUp
</div>
<div id="triangleDown">
triangleDown
</div>
<div id="triangleLeft">
triangleLeft
</div>
<div id="triangleRight">
triangleRight
</div>
<div id="triangleTopLeft">
triangleTopLeft
</div>
<div id="triangleTopRight">
triangleTopRight
</div>
<div id="triangleBottomLeft">
triangleBottomLeft
</div>
<div id="triangleBottomRight">
triangleBottomRight
</div>
css
#triangleUp {
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#triangleDown {
width: 0px;
height: 0px;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#triangleLeft {
width: 0px;
height: 0px;
border-right: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
#triangleRight {
width: 0px;
height: 0px;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
#triangleTopLeft {
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-top: 100px solid red;
}
#triangleTopRight {
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-top: 100px solid red;
}
#triangleBottomLeft {
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 100px solid red;
}
#triangleBottomRight {
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-bottom: 100px solid red;
}