使用css写出三角形

最新推荐文章于 2025-05-14 17:03:41 发布

原创最新推荐文章于 2025-05-14 17:03:41 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #三角形

本文介绍如何使用CSS的border属性来绘制不同方向的三角形，包括向上、向下、向左和向右的箭头形状。通过调整border的宽度和颜色，可以轻松创建各种样式。

CSS实现绘制三角形

面试突然问的一个css题，一开始都没反应过来，然后现在整理一下供大家参考。

箭头向上的三角形
.up{
width:0;height:0;
border-width:0 50px 50px; //对应上左右下
border-style:solid; //边框样式
border-color:transparent transparent red; //同上对应上(透明) 左右(透明) 下(红色)
}
.down{
width:0;height:0;
border-width:50px 50px 0; //对应上左右下
border-style:solid; //边框样式
border-color:red transparent transparent; //同上对应上(红色) 左右(透明) 下(透明)
}
.left{
width:0;height:0;
border-width:50px 50px 50px 0; //对应上右下左
border-style:solid; //边框样式
border-color:transparent red; // 对应上下(透明) 左右(红色)
}
.right{
width:0;height:0;
border-width:50px 0 50px 50px; //对应上右下左
border-style:solid; //边框样式
border-color:transparent red; // 对应上下(透明) 左右(红色)
}