通过border来实现。
1. <code>border: 40px solid transparent</code>设置border的宽度和样式。
2. <code>border-top-width</code>设置顶部的border宽度为0。
3. <code>border-bottom-color: #ff0000</code>设置底部border的颜色为红色
```css
width: 0;
height: 0;
border: 40px solid transparent;
border-top-width: 0;
border-bottom-color: #ff0000;
```

demo：
<iframe src="https://codesandbox.io/embed/friendly-hypatia-l2o6zy?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="friendly-hypatia-l2o6zy"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

通过border来实现。
1. <code>border: 40px solid transparent</code>设置border的宽度和样式。
2. <code>border-top-width</code>设置顶部的border宽度为0。
3. <code>border-bottom-color: ff0000</code>设置底部border的颜色为红色
css
width: 0

css实现三角形

文钦

css实现三角形

最新文章