如何用CSS写出三角形

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

Now_Sprouting

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

阅读量435

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/Now_Sprouting/article/details/105034670

本文详细介绍了如何使用CSS代码绘制多彩的三角形，通过修改边框颜色和透明度实现不同样式，提供了简洁的代码示例。

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

下面讲一下如何用CSS代码写出三角形,话不多说直接上代码:

<style>
        div {
            width: 0;
            height: 0;
            border-top: 100px solid pink;
            border-right: 100px solid #ff8066;
            border-bottom: 100px solid #fed71a;
            border-left: 100px solid #00c9a7;
        }
 </style>

效果图如下:
在这里插入图片描述
若只想其中一个三角形,则需要改写代码如下:

 div {
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid #fed71a;
            border-left: 100px solid transparent;
        }

效果图如下:
在这里插入图片描述
代码简写如下:

div {
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent transparent #FED71A transparent;
        }