如何用CSS写出三角形

最新推荐文章于 2023-09-05 16:23:33 发布

原创最新推荐文章于 2023-09-05 16:23:33 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

下面讲一下如何用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;
        }