您的位置: 首页 > 文章 > css实现各种三角形，提示框

css实现各种三角形，提示框

分类: 文章 • 2023-11-14 18:59:10

利用 `transparent` 属性实现各种三角形，提示框

需求

在不使用图片的情况，实现一个简单的三角形箭头

代码

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

最终效果

复杂点的话，同样的原理还可以实现一个五角星，原理都是利用 transparent 的透明属性。

原文：https://github.com/jawil/blog/issues/29