In this article, I will introduce a simple technique for adding borders to various irregular shapes with SVG filters.

Transparent generates irregular borders with SVG feMorphology filters

Need background, add borders to irregular graphics

In our daily development, we often encounter patterns that are not rectangular or circular. Something like this:

Using pure CSS and some techniques, it is possible to create the above graphics, but this is only the first step of the requirements.

Then, there may be a request to add borders to the above graphics, which makes CSS difficult to do.

Try to usedrop-shadowAdd borders

First, we can try using drop-shadow to add an outer shadow to an irregular shape.

Let’s take an arrow graph as an example. One of the simple ways to implement it using CSS is as follows:

<div class="arrow-button"></div>
Copy the code
.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, 0top; }}Copy the code

We can add a shadow to the irregular shape by adding a drop-shadow to the.arrow-button as follows:

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

drop-shadowLimitations of the solution

The limitation of using the drop-shadow scheme is that it can only generate shadows for irregular shapes, not borders without blurring.

Adding a drop-shadow to the above image looks like this, but it’s still a bit short of the non-blurred border we wanted for the entities:

Using SVGfeMorphologyFilter to add borders

Another way to think about it is to copy the original shape, enlarge it a little bit to change the color of the border, and then overlay the two shapes together to create an irregular shape with a border.

CSS also has the ability to transform: scale() to scale up elements, but the code to implement one of the original shapes might be too complex to add another one, so we’ll have to look for other implementations of this kind.

Here, we try to add borders to irregular shapes using SVG’s feMorphology filter.

If you don’t know much about SVG filters, you can check out my article getting Started: Interesting! Powerful SVG filters

A quick introduction to feMorphology filters

FeMorphology filter

FeMorphology is a morphology filter whose input source is usually the alpha channel of the graph. The two operations you use to do this can erode (thin) or expand (bold) the source graph.

Use the property operator to determine whether to corrode or expand the effect. Use the attribute RADIUS to indicate the extent of the effect, which can be understood as the size of the stroke.

  • Operator:erodeCorrosion mode,dilateIs in extended mode. The default iserode
  • Radius: The size of the stroke, which accepts a number indicating the extent of the effect in this mode. The default is 0

Let’s simply apply this filter to text and see what it looks like:

<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>
Copy the code
p {
    font-size: 64px;
}
.dilate {
    filter: url(#dilate);
}
.erode {
    filter: url(#erode);
}
Copy the code

The effect is as follows: Normal text on the far left, expanded mode in the middle, and corrosion mode on the right. Look at the effect, it’s very easy to understand:

To borrowfeMorphologyThe expansion ability to add borders to irregular shapes

Taking advantage of feMorphology’s ability to scale, we can prepare an SVG feMorphology filter in advance that does just that:

Copy the original shape, enlarge it a little bit to change the color of the border, and then add the two shapes together to produce an irregular shape with a border.

In addition, 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 for this filter is as follows:

<svg width="0" height="0">
    <filter id="outline">
        <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>
        <feMerge>
            <feMergeNode in="DILATED" />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
</svg>
Copy the code

This SVG filter code is simple:

  1. <feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></feMorphology>Taking the opaque part of the original as input, thedilateExpansion mode and degree of radius="1"“Generates a black block 1px larger than the original image
  2. usefeMergeOverlay the black block with the original

Let’s add a CSS filter filter: URL (#outline) to the.arrow-button and introduce the SVG filter we created:

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

Url is one of the key words in the CSS filter attribute. Url mode is one of the capabilities provided by CSS filters, allowing us to introduce specific SVG filters, which greatly enhance the power of filters in CSS.

Look at the effect:

Wow, it worked. With the feMorphology filter, we were able to add borders to irregular shapes. I was able to control the size of the borders by using radius=”1″ in the filter.

Then apply the above filter to a variety of irregular shapes to see the effect:

The effect is ok, but the color is black. If we want the border to be a different color, what can we do?

Supplemented byfeFlood 和 feCompositeChange the border color

Using the two SVG filters feFlood and feComposite, different colors can be given to the generated blocks. The code is as follows:

<svg width="0" height="0">
    <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>
Copy the code

With flood-color=”green” in feFlood, you can control the color of the generated border (block), which is set to green. The effect applied to each graphic is as follows:

So far, we have implemented an SVG filter to add different color borders to irregular graphics.

Transparent works with SVG feMorphology filters to generate irregular borders

To summarize

To summarize briefly:

  • usedrop-shadowIt is possible to add shadows to irregular shapes, but it is not possible to add entities to irregular shapes without blurred borders
  • usefeMorphologySVG filters can be used to add the border effect to irregular graphics, through control radius="1"You can adjust the size of the border
  • usefeMorphologySupplemented byfeFlood 和 feCompositeThe filter changes the border color
  • The URL pattern of CSS Filters allows you to quickly introduce SVG filters into HTML elements, for examplefilter: url(#outline)

It’s worth noting that since shapes aren’t 1:1 and feMorphology’s dilate mode doesn’t expand in proportion to the height and width of an element, the generated borders aren’t necessarily equal everywhere. The RADIUS attribute of feMorphology can pass in two values, separated by Spaces, indicating the size of the horizontal and vertical expansion, which can be tweaks to use in practice.

The last

This article is more to provide a kind of irregular border generation scheme ideas, of course, the specific encounter this situation will be mainly cut figure, but more understanding of a feasible method is not a bad thing.

Ok, that’s the end of this article, a simple tip, hope to help you 🙂

More exciting CSS technical articles are summarized in my Github – iCSS, continue to update, welcome to click the star subscription favorites.

If there are any questions or suggestions, you can communicate more, original article, writing style is limited, talent is shallow, if there is something wrong in the article, hope to inform.