绘制三角形和梯形,实际上是利用div的边框来实现的
**三角形**
方式一:将div的内容区域宽高设置为0px,边框设置大小,即为4块相拼接的三角形,
方式二:令其他三块的颜色为透明(或边框大小为0),就可得到三角形
带边框的实现:
方式一:通过伪元素,再做一个和该三角形(颜色设置成边框颜色)相同大小的三角形,颜色为白色,向下移动1px即可
方式二:通过filter:drop-shadow,当有一个三角形时,设置元素投影再偏移位置
**梯形**
上下的三角形,通过设置div宽的大小,高为0px实现
左右的三角形,通过设置div高的大小,宽为0px实现
代码示例
方法一:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div01{
width:0px;
height:10px;
border-top:40px solid transparent;
border-left:40px solid transparent;
border-right:40px solid blue;
/*border-bottom:20px solid green;*/
}
</style>
</head>
<body>
<div class="div01">
</div>
</body>
</html>
方法二:带边框
效果图:
.jf-list-tip-triangle{
position: absolute;
width: 0;
height: 0;
left: var(--prefixGap,5%);
box-sizing: border-box;
border-top-width: 0px;
border-right-width: 6px;
border-bottom-width: 6px;
border-left-width: 6px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: #aaa;
border-left-color: transparent;
border-style: solid;
}
.jf-list-tip-triangle::after{
content: " ";
box-sizing: border-box;
position: absolute;
top: 1px;
left: 0;
margin-left: -6px;
border-width: 6px;
border-right-width: 6px;
border-bottom-width: 6px;
border-left-width: 6px;
border-top-width: 0;
border-bottom-color: #fff;
width: 0;
height: 0;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-style: solid;
}
方法三:不带边框
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after { //只需要设置位置和颜色
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}