CSS Triangle with Pseudo-element

# 🧑‍💻秒杀！前端常见手写题！-HowieCong ## 一、利用边框实现三角形 ### （1）编码实现 ```html

``` ### （3）实现效果 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/871b405ef60d45dbbbdbc6cb1cf6f08c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSG93aWVDb25n:q75.awebp?rk3s=f64ab15b&x-expires=1751890781&x-signature=fmG%2BD2TLGiuahBVsDVMC49iNZZQ%3D) ## 二、利用 `clip-path` 实现三角形 ### （1）编码实现 ```html

``` ### （2）实现效果 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c4e5edf40be443e096757462793c2fe7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSG93aWVDb25n:q75.awebp?rk3s=f64ab15b&x-expires=1751890781&x-signature=MbIiazdChwSB%2FPKmWNCvuYYFygI%3D) ## 三、使用 SVG ### （1）编码实现 ```html ``` ### （2）实现效果 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d38c54eef1b44c93be5883354a5e0962~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSG93aWVDb25n:q75.awebp?rk3s=f64ab15b&x-expires=1751890781&x-signature=3YyWuBiK7K5Z07qJrwv0VROFDrg%3D) ## 四、使用 `::before` 或 `::after` 伪元素 ### （1）编码实现 ```html CSS Triangle with Pseudo-element

``` ### （2）实现效果 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f47f7d0773b14ff59da649c739b61e54~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgSG93aWVDb25n:q75.awebp?rk3s=f64ab15b&x-expires=1751890781&x-signature=5zSB8PDP56N7nJ86cBn1m6dB7Wo%3D) ## 五、讨论 ### （1）如果要给三角形添加动画效果，比如让它旋转，应该怎么做？ * 可以使用 CSS3 的 `@keyframes` 规则和 `animation` 属性。例如，要让一个使用边框实现的向上三角形旋转 ```js .triangle-up { width: 0; height: 0; border-width: 0 50px 50px 50px; border-style: solid; border-color: transparent transparent blue transparent; animation: rotate 2s infinite linear; /* 应用旋转动画 */ } @keyframes rotate { from { transform: rotate(0deg); /* 起始角度为 0 度 */ } to { transform: rotate(360deg); /* 结束角度为 360 度 */ } } ``` ### (2)在响应式设计中，如何保证三角形的大小和比例适应不同的屏幕尺寸？ * 对于使用边框实现的三角形，可以使用相对单位（如百分比）来设置边框宽度 * 对于使用 `clip-path` 实现的三角形，可以使用 `vw`、`vh` 等视口单位来确定元素的大小和 `polygon()` 函数中的坐标值，这样能让三角形根据屏幕尺寸自动调整大小和比例 ### （3）`clip-path` 的 `polygon()` 函数中坐标是如何确定的？ * `polygon()` 函数通过一系列的坐标点来定义裁剪区域。坐标的格式是 `(x y)`，其中 `x` 表示水平位置，`y` 表示垂直位置。取值可以是像素、百分比等单位。对于三角形，需要指定三个顶点的坐标，按顺时针或逆时针顺序排列 ### （4）`clip-path` 实现三角形和边框实现三角形相比，有什么优缺点？ * **优点**：`clip-path` 更加灵活，可以实现各种不规则形状的三角形，通过精确设置坐标点能满足复杂的设计需求 * **缺点**：兼容性不如边框实现方式，在一些旧版本的浏览器中可能不支持。而且使用 `clip-path` 可能会对性能有一定影响，尤其是在动画或频繁重绘的场景下 # ❓其他 ## 1. 疑问与作者HowieCong声明 * 如有**疑问、出错**的知识，请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong * 若想让作者**更新**哪些方面的技术文章或**补充**更多知识在这篇文章，请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong * **声明**：作者HowieCong目前只是一个前端开发小菜鸟，写**文章的初衷**只是全面提高自身能力和见识；如果对此篇文章喜欢或能帮助到你，麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧，欢迎大家来交流！ ## 2. 作者社交媒体/邮箱-HowieCong * [**HowieCong Social Meida** : Wechat|Instagram|Feishu|Juejin|Segmentfault...](https://bonjour.bio/howiecong) * **HowieCong Mail** :