Visual restoration tips! CSS to achieve corner effect

Welcome to WeChat public account: front-end detective

I recently encountered such a corner logo design in a project, as follows

Like this kind of layout that can change the text and adapt to the size, CSS is naturally preferred~ Let's see how to achieve it (read it in two minutes)

1. Rounded rectangles and triangles

It can be divided into two parts from the design, a rounded rectangle and a triangle

Suppose the HTML is like this

 <tag>审核为通过</tag>

Rounded corners are easy to achieve, border-radius just fine, as follows

 tag{
  border-radius: 4px 4px 4px 0px;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 16px;
  background: #EA3447;
}

Small triangles can be generated with pseudo elements. There are many ways to implement triangles. If there is no requirement for compatibility, it is recommended to use clip-path to achieve, which is easier to understand. Determine the three coordinates and cut it directly.

Doing it with CSS is

 tag::before{
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    left: 0;
    bottom: -3px;
    background: #BB2A39;
    clip-path: polygon(0 0, 100% 0, 100% 100%); /*三角*/
}

2. A slightly darker triangle

In the above implementation, two colors are used for the rounded rectangle and triangle, namely #EA3447 and #BB2A39

It is too troublesome to maintain two color variables every time, is there a way to use only one color? In other words, how to darken a color ? There are several ways

1. Cover with a layer of translucent black

This is actually easier to understand. In the original color, cover a layer of translucent black, and the original color will naturally become darker.

The specific implementation is to draw a layer of semi-transparent gradient with CSS background

 tag::before{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background-color: inherit;
}

Here background-color:inherit means that the background color is inherited from the parent

2. Implemented through filters

There is a CSS filter brightness , which can set the brightness of the image. Completely black , just right for this scene

The specific implementation is

 tag::before{
  filter: brightness(.7);
  background-color: inherit;
}

Similar effects can be achieved with other saturate and grayscale filters, but brightness is more appropriate here

3. The future solution color-mix

You may have used color processing schemes in some CSS preprocessing, such as reducing the brightness of a color by 20%, which may be the case in less

 .el{
  background: darken(@color, 20%); 
}

However, these are pre-processed, the changes are not real-time, and sometimes may not meet the actual needs.

Now, the new color scheme has to be implemented in CSS, that is color-mix , that is, color mixing, which is currently in the draft, if it is fully supported in the future, then to darken a color, can be achieved like this

 .el{
  --accent: #EA3447;
  background: hsl(from var(--accent) h s calc(l - 20%));
}

Here from means to expand the original color, and then recalculate it into a new color

More about the draft of color-mix can be viewed at https://www.w3.org/TR/css-color-5/#relative-HSL

3. Textured highlights

In order to highlight a certain texture, the designer added a layer of "weak highlights" to the label. The screenshot above may not be particularly clear. You can see the enlarged comparison picture below.

Can you see the difference? Can you appreciate the good intentions of the design?

It looks a bit similar, one is a solid color fill, and the other is a gradient fill. In order to ensure the unity of color variables, the highlights here can be achieved with a layer of translucent white gradient

 tag{
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) rgba(20, 30, 41, 0.76));
}

Here, a translucent white gradient from the upper left corner to the lower right corner is drawn, overlaid on the original color, the effect is as follows

Because it is just a simple and rude superposition, the overall result is white, and there is a feeling of insufficient saturation. The reason is that the superposition is not natural enough. So how to superimpose more naturally? You can use background-blend-mode , which is the background blending mode.

In order to make the overlay effect look softer, you can use soft-light here, as follows

 tag{
  background-blend-mode: soft-light
}

This effect is much better, very delicate, you can see the comparison effect

The complete code is as follows

 tag{
  border-radius: 4px 4px 4px 0px;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 16px;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) var(--bg, #EA3447);
  background-blend-mode: soft-light;
}
tag::before{
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  left: 0;
  bottom: -3px;
  background-color: inherit;
  filter: brightness(.7);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

Fourth, to summarize

The overall implementation is actually not too difficult. If the designer has no requirements, in fact, it can be over at the first step. However, if these textured designs are fully restored, the overall visual experience of the website can also be improved to a higher level. The following summarizes some implementation points:

1. Adaptive size should be implemented with CSS as much as possible
2. The implementation of the triangle recommends clip-path, which is easier to understand
3. Fully consider the maintainability of the implementation, for example, if you can use one variable, don't use two variables, the same is true for CSS
4. Overlay a layer of translucent black to darken the image
5. Image darkening can also be achieved with the CSS filter brightness
6. In the future, it can also be achieved by color mixing color-mix, you can learn about it in advance
7. Background blending modes allow colors to overlay according to nature

Have you learned these tips for improving visual restoration? Finally, if you think it's good and helpful to you, please like, bookmark, and forward ❤❤❤

Welcome to WeChat public account: front-end detective