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

Posted 2023-04-08

也是初次接触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度的锐角。

css制作三角形

【转载地址】http://www.cnblogs.com/xiaofeixiang/p/5022570.html

原理：定义空div，宽高为0，看成是两横两竖的盒子，两横在上面，箭头指向哪，哪边边框就为0，两边的边框就会靠在一起，形成一个顶点，两边的边框颜色则透明，三角形就是中间重叠部分切出来的

HTML：

<ul>
    <li class="row">
        <span>四个三角</span>
        <div class="triangle">
        </div>
    </li>
    <li class="row">
        <span>上三角</span>
        <div class="triangle-up">
        </div>
    </li>
    <li class="row">
        <span>下三角</span>
        <div class="triangle-down">
        </div>
    </li>
    <li class="row">
        <span>左三角</span>
        <div class="triangle-left">
        </div>
    </li>
    <li class="row">
        <span>右三角</span>
        <div class="triangle-right">
        </div>
    </li>
    <li class="row">
        <span>左下角</span>
        <div class="triangle-left-bottom">
        </div>
    </li>
    <li class="row">
        <span>右下角</span>
        <div class="triangle-right-bottom">
        </div>
    </li>
</ul>

CSS：

ul li
    list-style: none;
    float: left;
    margin-left: 30px;

.row span
    display: block;
    margin-bottom: 10px;

.triangle 
    width: 0;
    height: 0;
    border-top: 20px solid #EEB422;
    border-right: 20px solid #C0FF3E;
    border-bottom: 20px solid #A020F0;
    border-left: 20px solid #7CFC00;


.triangle-up 
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #A020F0;
    border-left: 20px solid transparent;


.triangle-down 
    width: 0;
    height: 0;
    border-top: 40px solid #EEB422;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;


.triangle-left 
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 40px solid #7CFC00;


.triangle-right 
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 40px solid #C0FF3E;


.triangle-left-bottom 
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid #7CFC00;


.triangle-right-bottom 
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 40px solid #C0FF3E;

效果图：