怎么用 CSS 画一个三角形

最新推荐文章于 2024-10-27 18:18:14 发布

bubbleSweet

最新推荐文章于 2024-10-27 18:18:14 发布

阅读量231

点赞数

分类专栏：笔记本文章标签： css html

本文链接：https://blog.youkuaiyun.com/bubbleSweet/article/details/116661298

版权

笔记本专栏收录该内容

38 篇文章

订阅专栏

怎么用 CSS 画一个三角形

此文章参考自这篇博客（点这里）

https://www.cnblogs.com/wangjiachen666/p/9462837.html

第一步：

	<div class="triangle"></div>

	.triangle {
            width: 100px;
            height: 100px;
            border: 100px solid #000;
            border-top-color: green;
            border-bottom-color: yellow;
            border-left-color: blue;
            border-right-color: pink;
        }

在这里插入图片描述

第二步：

将 width 和 height 设置为 0px

	.triangle {
            width: 0px;
            height: 0px;
            border: 100px solid #000;
            border-top-color: green;
            border-bottom-color: yellow;
            border-left-color: blue;
            border-right-color: pink;
        }

在这里插入图片描述

第三步：

除了想要的三角形之外，将另外三个三角形设置为透明

	.triangle {
            width: 0px;
            height: 0px;
            border: 100px solid #000;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: pink;
        }

得到一个粉色三角形

在这里插入图片描述