如何用css实现边框上的小箭头?
.con {
background: white;
border: 1px solid #D9E0E6;
padding: 20px;
position: relative;
border-radius: 3px;
width: 400px;
}
.con::after {
display: block;
content: "◆";
position: absolute;
font-size: 26px;
left: 105px;
bottom: 24px;
color: white;
}
/*注意:此处::before的content要比::after的bottom高1px,就形成了箭头视觉效果了*/
.con::before {
display: block;
content: "◆";
position: absolute;
font-size: 26px;
left: 105px;
bottom: 25px;
color: #D9E0E6;
}