纯CSS如何实现三角形？

最新推荐文章于 2023-08-21 14:47:29 发布

无-题

最新推荐文章于 2023-08-21 14:47:29 发布

阅读量248

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_39831508/article/details/88538608

版权

学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

为什么关注此问题？

三角形的图标在网页设计是很常见的，如下拉框，空心三角形等等，有必要理解原理，提高工作效率

考察的知识点:

border应用的原理

实践出真知，动手吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .border {
    width:50px;
    height:50px;
    border: 20px solid;
    border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
    }
</style>
<body>
    <div class="border"></div>
</body>
</html>

效果图：

现在假想一下把元素的长和宽都设置为0px,边框的值不变，每一边的边框将会不会由梯形变成三角形？

.border {
    width:0px;
    height:0px;
    border: 20px solid;
    border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
    }

效果图：假想成立

通过border-color设置不需要显示的边框使用透明色transparent

.border {
    width:0px;
    height:0px;
    border: 20px solid;
    border-color: rgb(223, 47, 144)  transparent transparent transparent;
    }

效果图：

拓展问题

1.项目中如果需要有缺口的三角形，如何实现？

无-题

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯CSS如何实现三角形？

为什么关注此问题？三角形的图标在网页设计是很常见的，如下拉框，空心三角形等等，有必要理解原理，提高工作效率考察的知识点:border应用的原理实践出真知，动手吧！&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&amp
复制链接

扫一扫