CSS Diagonal Chamfer

Problem

Chamfered Corners are a very popular style in web design and printing. It is usually a corner of one or more elements that is cut at one corner 45° (that is, the so-called chamfered angle). Especially recently, the flat design momentum has been over the quasi-true design, but also make this effect more popular. The shape of an arrow is generated when the chamfered corner has only one side of the element and each occupies the height of the element, 50% which is very popular in the button and breadcrumb navigation.

Figure Note: A button with a chamfered angle creates an arrowhead shape emphasizing its meaning

However, it is not so easy to use CSS to create this effect, which is not an effect that can be done with a single line of code. This results in a tendency for many authors to use the background image directly instead of a triangle to complete the chamfered angle (when the background is solid) and not to use one or more corners of the image that has been cut as the entire background.

Illustration: Example of a site with oblique corners applied (Translucent "Find & Book" box in the lower left corner)

This approach is obviously inflexible and difficult to maintain, and it increases latency because of the increase in HTTP requests and the total file size of the Web site. Is there any better way?

Solution Solutions

The first solution is a universal CSS gradient. Let's assume that we only have one oblique corner at a time-the lower right corner. The trick is that the gradient can accept an angle value as an argument (such as 45deg ), and the color label position is absolute length, neither of which is affected by changes in element and background size.

To sum up, we just need a linear gradient to be OK. It requires a transparent color label as a miter angle, and another same position with the color tag we want as the background color. The CSS code is as follows (such as a 15px size chamfer):

Background: #58a; background:linear-gradient ( -45deg, Transparent 15px, #58a 0);

It's simple, right? You can see the results.

Figure Note: The bottom-right corner of the chamfered element, completed with a simple CSS gradient

Technically speaking, we don't even need the first statement. We just introduced it as a downgrade: when the CSS gradient is not supported, that is, when the second declaration fails. So we still need a solid color background.

For ease of commissioning, we use different colors ( #58a and #655 ). In the app, two gradients should be the same color.

Now, let's say we need two oblique corners, one at the left and the other. There is no way to do this with just one gradient, so two gradients are on the pitch. The first thing we thought of might be:

Background: #58a; background:linear-gradient ( -45deg, Transparent 15px, #58a 0),            linear-gradient (45deg, Transparent 15px, #655 0);

However, as shown, this is not OK.

Note: Failed attempts to apply oblique chamfer effects to the bottom two corners

By default, two gradients are applied to the same element, and they will fall in love (masking each other). We need to make them smaller, so that background-size each gradient is applied to only half of the elements by using it:

Background: #58a; background:linear-gradient ( -45deg, Transparent 15px, #58a 0) right,            linear-gradient (45deg, Transparent 15px, #655 0) left;background-size:50% 100%;

You can see the results in.

Picture Note: Only one background-size is not enough ~

Even if applied background-size , the two gradients will cover each other. Because we forgot to turn it background-repeat off, our background has been repeated two times. So our background is still falling in love--this time because the background repeats itself. The newly modified code is as follows:

Background: #58a; background:linear-gradient ( -45deg, Transparent 15px, #58a 0) right,            linear-gradient (45deg, Transparent 15px, #655 0) left;background-size:50% 100%;background-repeat:no-repeat;

You can see the results in.

Note: Our lower-left and right-angled chamfer is finally OK.

It finally! In! Passed the verification! Now, you should know how to apply this effect to the other four corners. A total of four gradients are required, the code is as follows:

Background: #58a; background:linear-gradient (135deg, Transparent 15px, #58a 0) top left,            linear-gradient ( -135deg, Transparent 15px, #655 0) Top right,            linear-gradient ( -45deg, Transparent 15px, #58a 0) Bottom right,            Linear-gradi ENT (45deg, Transparent 15px, #655 0) bottom left;background-size:50% 50%;background-repeat:no-repeat;

You can see the results in.

Figure Note: Use four gradients to apply effects to Four Corners

One problem with the previous code is that it is not particularly maintainable. To change the background color there are four corner sizes and five edits are required. Adding a preprocessor mixin helps reduce duplication. This is the SCSS code:

@mixin beveled-corners ($BG, $tl: 0, $tr: $tl, $br: $tl, $BL: $tr) {    background: $BG;    Background:linear-gradient (135deg, Transparent $tl, $BG 0) top left,                linear-gradient (225deg, Transparent $tr, $BG 0) Top Right,                linear-gradient ( -45deg, Transparent $BR, $BG 0) Bottom right,                linear-gradient (45deg, Transparent $BL , $BG 0) bottom left;    background-size:50% 50%;    Background-repeat:no-repeat;}

Then, when needed, it can be used like this, using 2-5 a parameter:

@include beveled-corners (#58a, 15px, 5px);

In this example, we will get the chamfer angle in the upper left and bottom right corner 15px , 5px and border-radius the same principle in the lower left and upper right corner to get the oblique angle. This is because we provide default values for SCSS's mixin parameters, and these default values can also refer to other parameters.

Curve Cut Angle

There are a number of gradient methods that can be used to create a curved cut angle, which is often referred to as an "inner fillet" because it looks like a reversed version of the fillet. The only difference is that it uses a radial gradient instead of a linear gradient:

A great example of using curve cut angles on g2geogeske.com, designers have turned them into core design elements because they exist in navigation, content, and even footers.

Background: #58a; Background:radial-gradient (circle at top left,            transparent 15px, #58a 0) top left,            Radial-gradient (circle at top right,            transparent 15px, #58a 0) Top right,            radial-gradient (circle at bottom right,            Transparent 15px, #58a 0) Bottom right,            radial-gradient (circle at bottom left,            transparent 15px, #58a 0) Bott Om left;background-size:50% 50%;background-repeat:no-repeat;

You can see the results in.

Figure Note: Curve cut angle completed with radial gradient

Like the previous technique, the size of the cut angle can be controlled by the position of the color label, and using Mixin can make the code easier to maintain.

Inline SVG, Border-image solutions

Although a gradient-based solution is feasible, it has several problems:

• The code is very long and repetitive. In general, we want to have a cut angle of the same size in all four corners, so that we need to repeat four edits at a time. Similarly, to modify the background color We also need four edits, five compute downgrades.
• It is completely impossible to animate between cut angles of different sizes (depending on the browser).

Fortunately, according to our needs, there are a few other methods that we can use. One is to use the generated fillet in inline SVG border-image . Based on border-image how it works, can you imagine our SVG?

Because dimensions are not important ( border-image scalable, and SVG scaling is perfect, no need to worry about size-this is the benefit of vector charts!). ), the unit can be 1 , or more directly, a number directly. The corner length can be length, and the 1 straight edge length is also 1 . The result (zoom) is as shown.

Figure Note: SVG-based border-image , and its slices

The code is as follows:

border:15px solid transparent;border-image:1 url (' data:image/svg+xml,\<xmlns  = "Http://www.w3.org/2000/svg"  width= "3"  height= "3"  fill  = "%2358a">\<points= "0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2 "/>\</svg>');

Note that we used the size 1 of the slice. This is not the 1 meaning of pixels, it refers to the coordinate system of the SVG file (and therefore the default unit). If we specify a percentage of it, we need the 1/3 approximate value of the image, such as 33.34% . The approximate value is risky, so not all browsers use the same precision. However, by using the units of the SVG file's coordinate system, we don't need to dwell on the exact value of the problem.

Figure Note: border-image applying SVG to attributes

The results are as shown. Our incision angle is there, but there is no background. You can solve this in two ways: Specify a background, or border-image add a keyword to our declaration so that fill it doesn't discard intermediate slices. Here, we choose to specify a background, as this can also be used as a demotion.

In addition, our incision angle is slightly smaller than the cut angle created earlier, which is a bit odd. We clearly specified a 15px border width! This is caused by a gradient, 15px along the gradient direction, and the direction is perpendicular to the gradient. The width of the border is not measured diagonally, but horizontally/vertically. So did you find out why? Yes, we're going to use the Pythagorean theorem again, as we've said before.

Figure Note: Specify border-width the 15px corner size to get 15 / 根号(2) ≈ 10.606601718 the result, which is why our corners look much smaller

Help us understand. All in all, in order to get the same size, the border we use should be the size of our gradient method 根号(2) . Here, it should be 15 * 根号(2) ≈ 21.213203436 pixel, that is about equal 20px to, unless we really need the diagonal as close as possible to 15px :

border:20px solid transparent;border-image:1 url (' data:image/svg+xml,\<svgxmlns= "Http://www.w3.org/2000/svg"width= "3"Height= "3"Fill= "%2358a">\<Polygonpoints= "0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>'); background: #58a;

Figure Note: Where is our incision angle?!

However, the effect is not the effect we expect. Where did our hard-earned incision corner hide? Young man, don't worry! The incision angle is still there. If you set the background to another color, like #655 , you'll know what's going on.

Note: The background mysterious vanishing incision angle can be found by replacing our other colors.

As shown, the reason our incision angle disappears is that the background we specify is blocking them. What we need to do is use background-clip to prevent the background from extending to cover our borders:

border:20px solid transparent;border-image:1 url (' data:image/svg+xml,\<svgxmlns= "Http://www.w3.org/2000/svg"\ Width= "3"Height= "3"Fill= "%2358a">\<Polygonpoints= "0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>background: #58a; background-clip:padding-box;

This problem has been solved, as shown in our present box.

However, we can easily change the size of the corner in just one place: we only need to change the width of the border. We can even animate it, because it border-width can be animated! We can also change the background with just two edits. In addition, since our background is now independent of the corner effect, we can even assign it a gradient, or other texture, as long as it is at the edge of the color is #58a good. For example, see, use a hsla(0,0%,100%,.2) radial gradient from the to transparent .

Figure Note: Cut angle with a radial gradient background

There's only one small problem left. If border-image not supported, the downgrade is not just a corner. Because the background is cropped, it looks like there is no padding between the edges of the box and the content. To solve this problem, we can add a color to our borders in the same way as the background:

border:20px solid #58a; border-image:1 url (' data:image/svg+xml,\<svgxmlns= "Http://www.w3.org/2000/svg"\ Width= "3"Height= "3"Fill= "%2358a">\<Polygonpoints= "0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\</svg>background: #58a; background-clip:padding-box;

When border-image applied, the color is ignored, which can provide a more elegant downgrade, which looks.

Because of this flaw, when we want to change the background color, the number of edits needed 2 becomes 3 .

clip-pathSolutions for

Because border-image the solution is very compact and relatively dry, it still has its limitations. For example, we still need a solid background, or a background with a solid color at the edges. What if we want a different background, such as a texture, a pattern, or a linear gradient?

There is a way to keep us from all these limitations, even though it has its limitations. Do you remember clip-path attributes? One of the most amazing things is that CSS clip-path can be combined as a percentage (which refers to the component size) and the absolute length of the use, giving us great flexibility.

For example, clip-path the code for clipping a 20px rectangular element with a (horizontal) chamfer is as follows:

Background: #58a; Clip-path:polygon (20px 0, Calc (100%-20px) 0, 100% 20px,                    100% Calc (100%-20px), Calc (100%-20px) 100%,                    20px 100%, 0 calc (100%-20px), 0 20px);

Although the code is short, it does not mean that it is dry, which is one of its biggest problems if you do not use a preprocessor. In fact, this is the most wet CSS solution we have proposed, to change the corner size requires a 8 minor edit! However, we only need to change the background in one place.

The advantage is that we can use whatever background we want, even the replacement elements like pictures. such as an image with a tangent angle.

Figure Note: A clip-path picture made with a chamfer

None of the previous methods can be completed. In addition, clip-path it can be animated, even if the chamfer angle is different in size and shape. All we need to do is use a different clipping path.

In addition to wet, its browser support is not enough, it also has a disadvantage is: if not provided enough padding , it will also crop the text, because it only crops the elements, not distinguish between the parts. In contrast, the gradient method simply lets the text go beyond the corners (because they are just backgrounds), so that the border-image method only plays the role of the bounding box to wrap the text.

The corner of the future

In the future, we don't need to do this with CSS gradients, cropping, or SVG. A new attribute that corner-shape will be added to CSS backgrounds & Borders Level 4 can help us save a lot of energy. It can be used in conjunction with a border-radius different cut angle effect, defined in the border-radius size can be. For example, the cut angle specified in all corners 15px will be simple:

Border-radius:15px;corner-shape:bevel;

Reprinted from: http://www.w3cplus.com/css3/css-secrets/cutout-corners.html

CSS Diagonal Chamfer