本文介绍了如何使用CSS的border属性来创建不同朝向的等腰直角三角形，包括实心三角形、箭头以及空心三角形的实现方法。通过设置边框颜色透明、相对定位以及伪类元素，巧妙地组合成各种形状，展示了CSS在创建图形方面的灵活性。
1.border边框原理
将border属性的值写大点，我们就可以观察到，其实一个盒子的border其实是由三角形组成的。
<style>
.triangle{
width: 0;
height: 0;
/*边框大小*/
border: 100px solid;
/*边框颜色*/
border-color: red orange yellow green;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
效果图：
2.不同朝向的等腰直角三角形
利用transparent属性来设置边框颜色透明:
(1)方向向下的三角形：
.triangle{
width: 0;
height: 0;
/*边框大小、样式、颜色透明*/
border:100px solid transparent;
/*上边框颜色*/
border-top-color: red;
}
效果图：
（2）方向向右的三角形
.triangle{
width: 0;
height: 0;
border:100px solid transparent;
border-left-color: orange;
}
效果图：
（3）方向向上的三角形：
.triangle{
width: 0;
height: 0;
border:100px solid transparent;
border-bottom-color: green;
}
效果图：
（4）方向向左的三角形：
.triangle{
width: 0;
最低0.47元/天 解锁文章
941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
