css中实现三角形的几种方式

最新推荐文章于 2024-08-21 11:59:03 发布

AIGC小陈

最新推荐文章于 2024-08-21 11:59:03 发布

阅读量5.4k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_53312997/article/details/124960992

版权

本文记录了用CSS实现三角形的六种方法，包括HTML和CSS代码示例，探讨了各种方法的优缺点，并指出部分方法仅是视觉上的三角形效果。在实际应用中，可根据具体场景选择合适的方法。

摘要由CSDN通过智能技术生成

前言

写了几个小特效的代码，发现对于用纯css实现非常规的图形这个小技能，还是有点云里雾里的，所以以三角形为例，特此记录一下。

实现方式

实现方式目前为止，我知道的有6种，欢迎补充。

HTML代码

<body>
    <div class="triangle1"></div>
    <div class="triangle2">▼</div>
    <div class="triangle3"></div>
    <div class="triangle4"></div>
    <div class="triangle5"></div>
    <div class="triangle6"></div>
</body>

CSS代码

/*
1. 设置不同颜色的 border
通过 border 所占用面积形成三角形
无法设置阴影
*/
.triangle1 {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 100px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    box-shadow: inset 0 0 10px rgba(0, 255, 0, .5);
}

/*
2. 使用三角形字体
这种方式实现的

最低0.47元/天解锁文章

AIGC小陈

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫