css空心三角的三种实现方式

最新推荐文章于 2023-11-22 12:00:24 发布

vivid233

最新推荐文章于 2023-11-22 12:00:24 发布

阅读量3.6k

点赞数 4

文章标签： css 空心三角

本文链接：https://blog.csdn.net/qq_41034743/article/details/78775791

版权

在做页面的时候经常会用到空心三角，这里总结一下我所知道的空心三角的三种实现方法。

效果图：

1. 图片（不推荐）

还记得我第一次做这种效果的时候就是用了图片，ps出一个合适大小的三角图片，然后定位到需要的位置。现在想想真的是太蠢了。强烈不推荐这种方法。

2. 特殊字符

第一步画出大体的框，即demo;

　　
第二步设置字符大小并定位

这里需要两个◆字符，大小相同，一个黑色一个白色，白色在黑色左边两个像素位置，用白色覆盖黑色，就只剩一个黑色边框。

html代码：

<body>
    <div id = "demo">
        <span>◆</span>
        <span>◆</span>
    </div>
</body>

css代码：

#demo {
        width: 100px;
        height: 100px;
        background: #fff;
        position: relative;
        border: 2px solid #000;
    }
    span{
        width: 24px;
        line-height: 24px;
        font-size: 40px;
        position: absolute;
        top:20px;
    }
    span:nth-of-type(1){
        color: #000;
        right:-13px;
    }
    span:nth-of-type(2){
        color: #fff;
        right:-11px;
    }

3. CSS伪元素选择器:before与:after（推荐）

第一步画出大体的框，即demo;

　　
第二步绘制小三角形

想要有空心三角形效果这里需要绘制两个三角形，一个大一个小，用内层三角形覆盖外层三角形，直观上只有一个边框。

绘制小三角形有一个技巧，这里需要讲一下border属性，当元素border很大而元素的宽和高为零的时候，border实际显示的是一个矩形，而如果只显示其中一条边，那么看起来的形状就是一个三角形。

所以将：after和：before定位到元素的最右边。父元素position定位为relative，伪元素定位为absolute，将其整体移到父元素的最右面，设定top值。具体的细节，就有关于css盒模型了，注意一下border，当伪元素left设为100%时，元素正好处于父元素border-right并且覆盖在上面。

当两个小三角形实际显示的效果，看起来就是在大框的右边凸出来的三角边框了。

html代码：

<body>
    <div id = "demo"></div>
</body>

css代码：

#demo {
    width: 100px;
    height: 100px;
    background: #fff;
    position: relative;
    border: 2px solid #000;
}
#demo:after, #demo:before {
    width: 0;
    height: 0;
    content: "";
    border: solid transparent;
    position: absolute;
    left: 100%;
}
#demo:after {
    border-width: 10px;
    border-left-color: #fff;
    top: 20px;
}
#demo:before {
    border-width: 12px;
    border-left-color: #000;
    top: 18px;
}