如何用css实现一个三角形

最新推荐文章于 2025-12-03 15:29:19 发布

原创最新推荐文章于 2025-12-03 15:29:19 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

文章介绍了利用CSS的border属性和CSS3的clip-path属性来创建三角形的方法。第一种方法是通过设置不同边框颜色和宽度形成三角形；第二种方法则是通过polygon函数定义裁剪路径，结合transform旋转实现形状变化。

方法1：利用border属性

.triangle{
    width: 0;
    height: 0;
    //只有上边框有颜色，其它为透明
    border-color: red transparent transparent transparent; 
    border-style: solid;
    border-width: 10px;
}

方法2：利用CSS3的clip-path属性

.triangle{
    width: 10px;
    height: 10px;
    background: red;
    //将坐标（0，0），（5，10），（10，0）连成一个三角形
    clip-path: polygon(0px 0px, 5px 10px, 10px 0px);
    //旋转180°，变成下三角
    transform: rotate(180deg);
}