解释下用div+css画三角形的原理.代码:

Posted 2023-03-30

<style>.a
width:0; height:0;
line-height:0;
border:100px solid transparent;
border-bottom-color:#000000;
border-top:0;
</style>
<div class="a"></div>

div+css画三角形代码原理采用的是均分原理。
在矩形的直角，两条边的样式要均分，比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角。 参考技术A 主要原理是利用了相邻两个边框的接壤处分配原则，如果没有宽度和高度的话，其实应该是四个三角形接成的矩形 参考技术B 有四道很粗的border，而边框内的内容是中心的一点