Smart use of CSS to achieve colorful triangle border animation

Recently, a small asked me, I saw a colorful triangle border animation using SVG on a website of 162202f414abcc, and asked if I could use CSS to achieve:

A very interesting animation effect, which immediately reminded me of the border animation I introduced in the article CSS whimsical border animation , very similar:

The core is to use the angular gradient ( conic-gradient ), and then cover the central area of the pattern with a small figure.

However, there are two difficulties in this triangle animation:

1. The whole figure is a triangle

In CSS, we can implement rectangles and circles relatively easily, but triangles are undoubtedly trickier here.

2. The entire border also has a shadow, and the shadow is still on both sides of the border

It doesn't seem complicated here, but it's actually quite difficult. If the above method is used to hollow out the central area of the pattern by covering and masking a small figure, how can the shadow on the other side be generated? Even using drop-shadow , it will be obscured by the overlaid inner graphics.

Of course, CSS can still achieve this graphics, this article will explain how to use CSS to achieve the above colorful triangle border animation.

Body animation with angular gradients

First of all, we still need to use the angular gradient conic-gradient to realize the main body of the entire animation.

<div></div>

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

div {
    width: 260px;
    height: 260px;
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    animation: rotate 3s infinite linear;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

The core is just an angular gradient pattern, with CSS @Property, to make the whole effect rotate:

Of course, if you feel that CSS @Property is not easy to understand or you are worried about compatibility issues, you can replace it with pseudo-elements to achieve the same graphics, and then perform transform: rotate() rotation, the effect is the same.

Get triangles based on rectangle shapes

OK, next, we need to get the triangle shape based on the rectangular shape. For the triangle of the outer circle, we can get it by cutting clip-path , which is also very simple:

div {
    width: 260px;
    height: 260px;
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    animation: rotate 3s infinite linear;
  + clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

You can get the following effects:

This way, we get a solid triangle. The next thing you need to do is to hollow out the inside.

The simplest idea is to superimpose a smaller one in the middle, and the color is the same as the background color:

You can click here for the complete code -- CodePen Demo -- Pure CSS Linear Triangle

However, there are two fatal problems with doing this:

1. If the background color is not a solid color but a gradient color, this method will not work
2. The shadow effect cannot be added to the inside of the triangle border implemented by this method

Both of these flaws are unacceptable, so we have to find a way to really hollow out the center, and when the hollow is done, it needs to be transparent in the center.

So here we have to use mask.

However, it is more troublesome to use mask to implement a smaller triangle based on such a graphic. We are equivalent to implementing such a hollow triangle graphic. The schematic diagram is as follows:

Such a graph, with clip-path , can get a triangular border graph, what does it mean, I made a moving graph here:

On the left is the figure after masking using mask , and on the right is the figure after cutting using clip-path , their effects are superimposed together to achieve a border triangle.

Of course, you need to have a deeper understanding of the mask here. To use the mask to cut a triangle with an internal hollow, the schematic diagram is as follows:

OK, the complete code is this:

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

div {
    width: 260px;
    height: 260px;
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    mask: 
        linear-gradient(117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(-117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(#000, #000);
    mask-position: 0 0, 130px 0, 0 250px;
    mask-size: 130px 250px, 130px 250px, 100% 10px;
    mask-repeat: no-repeat;
    animation: rotate 3s infinite linear;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

We get a triangular border with hollow inside:

Use drop-shadow to add light and shadow

The last step is relatively simple. Since the above triangle is already a hollow figure, we can directly use drop-shadow to add a layer of light and shadow effect to the element. However, because drop-shadow is used, the clip-path added directly on the original element cannot be displayed. This is a good solution. , we just need to add one more layer structure and add drop-shadow to the parent element:

<div class="g-container">
    <div class="g-triangle"></div>
</div>

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.g-container {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));
}
.g-triangle {
    width: 260px;
    height: 260px;
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
    mask: 
        linear-gradient(117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(-117deg, #000 55%, transparent 55%, transparent),
        linear-gradient(#000, #000);
    mask-position: 0 0, 130px 0, 0 250px;
    mask-size: 130px 250px, 130px 250px, 100% 10px;
    mask-repeat: no-repeat;
    animation: rotate 3s infinite linear;
}
@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

Here is another little trick. drop-shadow can be added repeatedly. The two shadow colors added here are the colors set in conic-gradient() . In the end, we get the effect shown in the title image:

You can click here for the complete code -- CodePen Demo -- Pure CSS Glowing Triangle

Clip circular triangles using clip-path

The above uses clip-path cut the outer triangle and mask to hollow out the inner triangle. After reminding, clip-path can cut out a circular triangle by itself.

The above code can also be simplified to:

<div class="g-container">
    <div class="g-triangle"></div>
</div>

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.g-container {
    width: 260px;
    height: 260px;
    filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));
}
.g-triangle {
    width: 200px;
    height: 200px;
    clip-path: 
        polygon(
        50% 0%,
        0% 100%,
        8% 100%,
        50% 15%,
        88% 93%,
        7% 93%,
        7% 100%,
        100% 100%
    );
    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));
    animation: rotate 3s infinite linear;
}
@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

The effect is the same:

You can click here for the complete code -- CodePen Demo -- Pure CSS Glowing Triangle

It is necessary to explain here that it is possible to use clip-path cut a ring pattern. Suppose, we want a square ring with the following order of points:

{
    clip-path: polygon(0% 0%,0% 100%,25% 100%,25% 25%,75% 25%,75% 75%,25% 75%,14% 100%,100% 100%,100% 0%);
}

to get:

Similarly, to get a triangular ring, only 7 points are needed:

{
    clip-path: polygon(50% 0%,0% 100%,13% 100%,50% 20%,85% 90%,8% 90%,8% 100%,100% 100%);
}

The effect is as follows:

Here is a very useful tool to assist in the production clip-path graphics. If you are interested, you can try it: CSS clip-path Editor

finally

To understand the above complete code, you may also need to complete some basic CSS knowledge, you can click to learn as needed:

• clip-path: wonderful CSS shapes (CSS graphics)
• CSS @property custom properties: CSS @property makes the impossible possible
• Use drop-shadow to generate light sources and borders of irregular graphics: use drop-shadow to achieve line light and shadow effects

Well, this is the end of this article, I hope this article will help you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdote 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.