Detailed explanation of how to implement irregular borders using CSS3+SVG filters

This article will introduce a little trick to use SVG filters to add borders to various irregular graphics. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Require background and add borders to irregular graphics

---

In our daily development, we will encounter some Non-rectangular, non-circular patterns. Similar to the following:

Using pure CSS and some techniques, you can create the above graphics. Of course, this is only the first step of the requirement.

Immediately afterwards, there may be a request to add a border to the above graphics. At this time, CSS will be difficult to do.

Try to use drop-shadow to add a border

---

The first method, we can try to use drop-shadow, add an outer shadow to irregular graphics.

We take an arrow graphic as an example and use CSS to simply implement it. One of the ways to simply implement it is as follows:

<div class="arrow-button"></div>

.arrow-button {
    position: relative;
    width: 180px;
    height: 64px;
    background: #f49714;

    &::after {
        content: "";
        position: absolute;
        width: 32px;
        height: 64px;
        top: 0;
        right: -32px;
        background: 
            linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
            linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
        background-size: 32px 32px;
        background-repeat: no-repeat;
        background-position: 0 bottom, 0 top;
    }
}

We pass it to .arrow-button Add a drop-shadow to add a shadow to irregular graphics. The effect is as follows:

.arrow-button {
    ...
    filter: drop-shadow(0px 0px 2px #000);
    ...
}

drop-shadow Limitations of the solution

Use drop-shadow The limitation of the solution is that drop-shadow can only Generating shadows on irregular graphics cannot produce a border effect without blur.

The effect of adding drop-shadow to the above graphics is as follows, which is still a little short of the entity we want without a blurred border:

Use SVG feMorphology Filter to add a border

---

We can also change the idea, copy an original graphic, and then slightly enlarge it and change it As the color of the border, and then superimpose the two graphics together, an irregular graphic with a border can be generated.

CSS also has the ability to enlarge elementstransform: scale(), but the code itself to implement an original graphic may be very complicated, and superimposing another one may seem awkward. It's too elegant, we have to find another way to find other similar implementations.

Here, we try to use SVG’s feMorphology filter to add borders to irregular graphics.

A brief introductionfeMorphology Filter

feMorphology filter

feMorphology is a morphological filter, and its input source is usually It is the alpha channel of the graphics, and its two operations can erode (thinen) or expand (thicken) the source graphics.

Use attributes operator to determine whether you want a corrosion effect or an expansion effect. Use the attribute radius to indicate the degree of effect, which can be understood as the size of the stroke.

• operator: erode corrosion mode, dilate is expansion mode, the default is erode
• radius: stroke The size, accepts a number, indicating the degree of effect in this mode, the default is 0

We will simply apply this filter to text to see the effect:

<div class="g-text">
    <p>Normal Text</p>
    <p class="dilate">Normal Text</p>
    <p class="erode">Normal Text</p>
</div>

<svg width="0" height="0">
    <filter id="dilate">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="3"></feMorphology>
    </filter>
    <filter id="erode">
        <feMorphology in="SourceAlpha" result="ERODE" operator="erode" radius="1"></feMorphology>
    </filter>
</svg>

p {
    font-size: 64px;
}
.dilate {
    filter: url(#dilate);
}
.erode {
    filter: url(#erode);
}

Effect As follows: The one on the far left is normal text, the one in the middle is the expansion mode, and the one on the right is the corrosion mode. Look at the effect, it is very easy to understand:

borrowedfeMorphology’s expansion ability adds borders to irregular graphics

Using the expansion ability of feMorphology, we can prepare an SVG in advance feMorphology Filter, its function is as mentioned above:

Copy an original graphic, then enlarge it slightly and change it to the color of the border, and then superimpose the two graphics together to generate a Irregular graphics with borders.

And SVG filters can be easily introduced into different graphics through the url mode of CSS Filter, and the reusability is very high.

The simple code of this filter is as follows:

<svg width="0"    style="max-width:90%">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>
        <feMerge>
            <feMergeNode in="DILATED" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</svg>

A brief analysis of this SVG filter code:

• ## Use the opaque part of the original image as input and use the dilate expansion mode And the degree is radius="1", generating a black tile 1px larger than the original image

• Use

  feMerge to convert the black image Blocks and original images are superimposed

我们还是给上述的 .arrow-button 添加一个 CSS filter filter: url(#outline)，引入我们创建的 SVG 滤镜：

.arrow-button {
    ...
    filter: url(#outline);
    ...
}

url 是 CSS 滤镜属性的关键字之一，url 模式是 CSS 滤镜提供的能力之一，允许我们引入特定的 SVG 过滤器，这极大的增强 CSS 中滤镜的能力。【推荐教程：CSS视频教程】

看看效果：

Wow，这下成功了，通过 feMorphology 滤镜，我们成功的实现了给不规则的图形添加了边框效果，我能可以通过控制滤镜中的 radius="1" 来控制边框的大小。

再将上述滤镜运用在各种不规则图形下看看效果：

效果还算可以，就是颜色是黑色的。如果我们希望边框的颜色是其他颜色，有没有办法呢？

辅以 feFlood 和 feComposite 改变边框颜色

通过 feFlood 和 feComposite 两个 SVG 滤镜，可以给生成的图块上不同的颜色，代码如下：

<svg width="0"    style="max-width:90%">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>

        <feFlood flood-color="green" flood-opacity="1" result="flood"></feFlood>
        <feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite>

        <feMerge>
            <feMergeNode in="OUTLINE" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</svg>

通过 feFlood 中的 flood-color="green"，即可控制生成的边框（图块）的颜色，这里设置为了绿色。应用到各个图形上的效果如下：

至此，我们实现了通过 SVG 滤镜实现对不规则图形添加不同颜色的边框。

完整的 DEMO，你可以戳这里：transparent 配合 SVG feMorphology 滤镜生成不规则边框

总结一下

---

简单的总结一下：

• 使用 drop-shadow 可以实现给不规则图形添加阴影，但是无法实现给不规则图形添加实体不带模糊的边框
• 使用 feMorphology SVG 滤镜可以实现给给不规则图形添加边框效果，通过控制 radius="1" 可以调节边框的大小
• 使用 feMorphology 辅以 feFlood 和 feComposite 滤镜改变边框颜色
• 通过 CSS Filter 的 url 模式，可以快速的将 SVG 滤镜引入 HTML 元素，例如 filter: url(#outline)

值得注意的是，由于图形高宽不是 1:1 的，并且 feMorphology 的 dilate 模式也不会根据元素的高宽等比例的扩张，所以生成的边框是不一定在各处的均匀相等的，而 feMorphology 的 radius 属性可以传入两个值，使用空格分离，分别表示横向与纵向的扩张大小，实际使用的时候可以微调一下。

最后

---

本文更多的是提供一种不规则边框的生成方案思路，当然，具体遇到这种情况大部分还是会以切图为主，不过多了解掌握一种可行方法也不是坏事。

好了，本文到此结束，一个简单的小技巧，希望对你有帮助 :)

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Detailed explanation of how to implement irregular borders using CSS3+SVG filters. For more information, please follow other related articles on the PHP Chinese website!