伪元素after实现三角形

tech2026-01-13  17

伪元素after实现三角形

空心三角箭头

.box{ position:relative; width: 580px; height: 300px; padding: 20px 24px; box-sizing: border-box; background: #fff; border: 1px solid #cccccc; } .box:after { content: ""; position: absolute; top: -6px; right: 44px; width: 10px; height: 10px; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; transform: rotate(-132deg); background: #fff; }

实心三角形

.box{ position:relative; width: 580px; height: 300px; padding: 20px 24px; box-sizing: border-box; background: #fff; border: 1px solid #cccccc; } .box:after { content: ""; position: absolute; top: -6px; right: 44px; width: 10px; height: 10px; border-right: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 100px solid #f00; background: #fff; }
最新回复(0)