纯CSS绘制三角形（各种角度）

最新推荐文章于 2025-06-21 09:15:59 发布

百世沉浮

最新推荐文章于 2025-06-21 09:15:59 发布

阅读量503

点赞数

CC 4.0 BY-SA版权

分类专栏：代码文章标签： css 三角 html5

本文链接：https://blog.youkuaiyun.com/ch5256865/article/details/65448821

代码专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何使用CSS3来创建各种方向的三角形，包括向上、向下、向左、向右以及组合方向的三角形，并展示了如何通过背景渐变和圆角设置实现圆角三角形的效果。

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

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

css3 实现圆角的三角形

background: linear-gradient(45deg, transparent 50%, #61C4CF 0%);
background-size: 16px 16px;
border-top-right-radius: 3px;