使用border实现三角形
<div class="d"></div> <style> .d::after { content: ""; border-style: solid; border-width: 40px 40px 0 40px; display: inline-block; border-color: black transparent transparent transparent } </style>
实现原理 顺序都是上右下左。
将指定方向边宽度为0,对角边设置颜色即可实现上下指定转向。
在移动端设置图纸上的指定大小,然后通过 transform: scale(0.5)实现缩小,这个和移动端1像素实现原理相同