Recently, a friend of mine asked me if I could use CSS to realize a colorful triangular border animation implemented in SVG on a website:

A very interesting animation effect that immediately reminds me of the border animation I introduced in CSS Whimsical Border Animation, very similar:

The core of the design is the use of Conic-gradient, and then the central area of the pattern is covered by a small figure.

However, there are two difficulties with this triangle animation:

  1. The whole figure is a triangle

Rectangles and circles are relatively easy to implement in CSS, but triangles are definitely trickier.

  1. The entire border is also shaded, and the shadows are still on both sides of the border

Here seems not complicated, but in fact, it is difficult. If the above method is adopted, the central area of the pattern is hollowed out by covering a small figure, then how can the shadow on the other side be generated? Even if drop-shadow is used, it will be obscured by the inner shape of the overlay.

Of course, CSS can still be used to create this graphic, so this article will show you how to use CSS to create this colorful triangle border animation.

Animate the body with angular gradient

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

<div></div>
Copy the code
@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; }}Copy the code

The core is just an angular gradient that rotates the effect with CSS @Property:

Of course, if CSS @property is a bit confusing or if you’re worried about compatibility, you can replace it with the same shape with pseudo-elements and rotate it with transform: rotate().

Triangles based on rectangular shapes

OK, next, we need to get the triangle shape based on the rectangle shape. For the outer triangle, we can get it by clip-path cutting, which is 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);
}
Copy the code

The following results can be obtained:

In this way, we have a solid triangle. The next step is to hollow out the inside.

The simplest idea is to superimpose a smaller shape in the middle with the same color as the background:

For the full code you can poke here — CodePen Demo — Pure CSS Linear Triangle

But there are two fatal problems with this:

  1. This method fails if the background color is not solid but gradient
  2. This method does not add shadows to the inside of the triangle border

Both of these defects were unacceptable, so we had to find a way to actually hollow out the middle, and once the hollow was done, the center had to be transparent.

So, here we have to use masks.

However, it is more troublesome to use mask to realize a smaller triangle based on such a figure. We are equivalent to realizing such a hollow triangle figure, as shown in the following diagram:

Such a figure, combined with clip-path, produces a triangular border shape. I have made a GIF here:

On the left is the mask with mask, and on the right is the clip-path with clip-path. Their effects are combined to create a border triangle.

Of course, it is necessary to master mask in depth, and use mask to cut an internal hollow triangle as follows:

OK, the complete code looks like 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; }}Copy the code

We have a triangular border with a hollow inside:

Add shadow with drop-shadow

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

<div class="g-container">
    <div class="g-triangle"></div>
</div>
Copy the code
@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; }}Copy the code

Here is another trick, drop-shadow can be added multiple times, the two shadow colors added here are the colors set in Conic-gradient (), and finally, we get the effect shown in the above image:

The full code can be found here — CodePen Demo — Pure CSS, effortless Triangle

Clipping ring triangles with clip-path (updated on 2022/02/16)

Above, clip-path is used to cut the outer triangle and mask the inner triangle. As a reminder, clip-path can cut a circular triangle alone.

The above code can also be simplified to:

<div class="g-container">
    <div class="g-triangle"></div>
</div>
Copy the code
@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; }}Copy the code

The effect is the same:

The full code can be found here — CodePen Demo — Pure CSS, effortless Triangle

It is necessary to explain that it is possible to cut a circular pattern using clip-path. Suppose we need a square ring with points in the following order:

{
    clip-path: polygon(0% 0%.0% 100%.25% 100%.25% 25%.75% 25%.75% 75%.25% 75%.14% 100%.100% 100%.100% 0%);
}
Copy the code

You can 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%);
}
Copy the code

The effect is as follows:

Clip-path Editor: CSS Clip-Path Editor: CSS Clip-Path Editor

The last

To see the complete code above, you may also need to add some basic CSS knowledge. Click here if you need to:

  • Clip-path: CSS Shapes
  • CSS @ Property Custom property: CSS @ Property makes the impossible possible
  • Use drop-shadow to generate irregular light source and frame: Skillfully use drop-shadow to achieve line lighting effect

Well, that’s the end of this article, I hope you found it helpful 🙂

Want to Get the most interesting CSS information, do not miss my public account – iCSS front-end interesting news 😄

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

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