CSS渡一教程学习笔记(四)--利用border刻画一个三角形

本文链接：https://blog.youkuaiyun.com/zhou_shadow/article/details/91958666

这篇笔记介绍了如何利用CSS的border特性来创建一个三角形。通过理解盒子模型中border的四边性质，可以借助对角线来划分边框宽度，从而在border的交界处形成斜线，进而实现三角形的绘制，这在实际开发中可能会派上用场。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天笔记刻画一个三角形。估计以后会用的到，所以在这里记一下

 <style>
        .div1{
          /*  width:0px;
            height:0px;
            border:50px solid red;
            !*可以设置为透明transparent*!
            border-top-color:blue;
            border-bottom-color:black;
            border-left-color:green;
            border-right-color:yellow;*/
            /*第一步:画一个中规中矩的div,内容区域为100*100正方形*/
            width:200px;
            height:200px;
            border:1px solid red;
            /*更改border的大小  */
         /*   width:200px;
            height:200px;
            border-top:200px solid red;
            border-bottom:200px solid black;
            border-left:200px solid green;
            border-right:200px solid yellow;*/
        /*
        第三步将width和height设置为0*/
          /*  width:0px;
            height:0px;
            border-top:200px solid red;
            border-bottom:200px solid black;
            border-left:200px solid green;
            border-right:200px solid yellow;
        }*/
        /* 第四步将其他的border的颜色设置为透明*/
       width:0px;
        height:0px;
        border-top:200px solid transparent;
        border-bottom:200px solid transparent;
        border-left:200px solid green;
        border-right:200px solid transparent;
        }
    </style>

<body>
	<div class="div1">
	</div>
</body>

在盒子模型中，我们可以知道所有的box的border的四条边都只是一边，如果设置了宽度的话，那么各自的border的宽度依据对角线进行划分。容器的border的交界处为一条斜线，故而可以用此方法来画三角形
在这里插入图片描述