如何用css实现边框上的小箭头?

时间:2025-01-19 08:33:58
.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; }