1,箭头
html:
css:
.d1{
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent transparent #339933;
position: relative;
left: 20px;
cursor: pointer;
}
.d1:after{
content: '';
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #fff;
position: absolute;
transform: rotate(90deg);
bottom:-10px;
left:-12px;
}
2:三角形
html同上,
css:
.d1{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent #339933;//三角形朝上
border-color: #339933 transparent transparent;//三角形朝下
border-color: transparent #339933 transparent transparent;//三角形朝左
border-color: transparent transparent transparent #339933;//三角形朝右
}