css怎么实现小的倒三角

Posted 2023-04-08

如果想用css 弄出个倒三角的话, 只能使用border了, 可以这样写, 写一个div 宽高都是0px , 把border其他都设置成10px solid transparent;再把border-top:10px solid red; 这样看起来 就能挤成个倒三角 比如::: <div style="width:0px;height:0px;border-top:100px solid red;border-left:150px solid transparent;border-bottom:50px solid transparent;border-right:150px solid transparent;"></div> 参考技术A .triangle 
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 20px solid transparent;
    border-top-color: #000;
    border-bottom-width: 0;

参考技术B <style>
#triangle-down 
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;

</style>
<div id="triangle-down"></div>

本回答被提问者和网友采纳

css制作三角形的原理是啥？

也是初次接触html，在网上找了下教程，但是不明白三角形的原理是什么？

还有border的三要素（border-width、border-color、border-style）又是如何运用的？我看好像有什么border-style：啥啥啥的；←_←

均分原理
在矩形的直角，两条边的样式要均分
比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角追问

网易云课堂那个教程一点基础都不教，什么叫样式和均分……→_→
另外这个我是在网上找的，云课堂教的是，宽高为0，然后三个边框变白……

追答

样式也就是每一条CSS规则
均分原理是为了好记给起的名字
每个box（盒子）都有4条边(border )，而且边都是有宽度的
边可以设置的样式大概有三条 border-width (宽) border-color(颜色) border-style(虚线啊还是点啊还是实线)
而box的角会被两条边的样式作用，因为你不能说左上角只属于左边，不属于上边
所以沿对角线平分，每边各占一个45度的锐角

参考技术A 1.div+css画三角形代码原理采用的是均分原理。
2.在矩形的直角，两条边的样式要均分，比如左上角 border-top 和 border-left 的样式要均分
如果border-left 无色透明， border-top有色， 就会出来一个45度的锐角。