Corner cut effect is a kind of design style, nowadays is very popular and widely used in graphic design, it is the most common form of the element of one or more cut into 45 ° incision, especially in recent years, after the flat design over to materialized, cut the foot design more popular, such as the image below is achieved by corner cut a navigation bar, The implementation will be discussed in detail later.
1. Two types of gradients in CSS (Linear-gradient radial-gradient)
Before understanding the Angle of cut, we preferred to learn about CSS gradient. CSS gradient can be divided into two types: Linear-gradient and radial gradient.
linear-gradient
Linear-gradient can be used to generate a linear gradient color. This gradient color is used by CSS
Linear Gradient in CSS is defined by a Gradient line, where each point on the Gradient line has a different color, and each point on the vertical line above the Gradient line has the same color.
Syntax for linear gradients:
linear-gradient(
[ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?Copy the codeThe syntax of linear gradients can be divided into two parts: the first part is used to define the gradient line, and the second part is used to define the color point of the gradient. Linear gradients can be defined in two ways. The first is through CSS, such as 45DEg, 135deg, etc. The other is defined by CSS, such as to left top, to right bottom, etc. The gradient color point is defined by a CSS type, which is defined by a CSS color and an optional percentage or length value that determines the position of the color on the gradient line.
Here are some examples of linear gradients:
linear-gradient( 45deg, blue, red ); /* A gradient on 45deg axis starting blue and finishing red */
linear-gradient( to left top, blue, red);
/* A gradient going from the bottom right to the top left starting blue and finishing red */
linear-gradient( 0deg, blue, green 40%, red );
/ A bottom-up gradient, starting with blue, green at 40%, and ending with red /
radial-gradient
Radial gradient is mainly defined by the initial center of the radial gradient, the shape and position of the end, and the gradient point. The radial gradient function also eventually returns a CSS type.
Radial gradient syntax is as follows:
radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
at <position> ,
]?
<color-stop> [ , <color-stop> ]+
)
where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
and <color-stop> = <color> [ <percentage> | <length> ]? Copy the codeRadial tween is a little more complicated than linear tween, we can define the shape of radial tween (circle and Ellipse), The start of the gradient (similar to background-position or transform-origin), the end of the gradient (extend-keyword), and the color-stop gradient. Extend-keyword has four optional values:
Closest -side: Radial gradient ends on the edge of the element applying the radial gradient closest to the center of the gradient.
Closest -corner: Apply the radial gradient element at the Angle closest to the center of the gradient
Apel-side: Opposite to closet Side, the radial gradient ends on the edge farthest from the center of the circle.
Apsarp-corner: The location of the farthest Angle from the center of a circle, contrary to closest-corner
stripe
We can use the gradient in the CSS to achieve stripes, in linear gradient, if multiple color code with the same position, they will produce a transition zone between the infinitely small, color transition of start-stop, respectively is the first and the last one specified values, a sudden change in effect is the color on that point for the next color points, rather than a gradient effect, This specificity also applies when the position of the next color point is smaller than the position of the previous color point. Because of this feature, we can define a striped gradient effect.
background: linear-gradient(red 30%, blue 0);
background-size: 100% 30px;Copy the code
You can see that the code above generates horizontal stripes, red and blue, and linear gradients. We omit the gradient direction, so linear gradients use the default values from top to bottom. Background-size controls the size of the background. If the value is a combination of two digits, the first one indicates the width of the background and the second one indicates the height of the background. You can see the 30px we set. Meanwhile, background-repeat is the default repeat, so our final effect is that the striped background repeats in the vertical direction.
2. Background properties in the CSS
background-image
In CSS, we can use the background-image attribute to set one or more backgrounds for elements. These background images are stacked above background-color and below the content. The background-image set first is closest to the user. Background-image is set to be further away from the user.
The border of the element is drawn above background-image. The position of background-image depends on background-position and background-origin, which will be explained below.
background-position
The background-positionCSS property defines the position of the background image relative to the position layer defined by background-Origin. The default background-origin value is padding-box. The initial value of background-postion is 0%. Background-origin determines the position of the background image defined by background-position. It has three options: border-box, padding-box, and Content-box. The three values are easy to understand. For example, if the initial value of background-position is set to 0%, then when background-origin is set to border-box, the background image will be drawn from the border-box. If the background-box is set to padding-box, the background image will be drawn from the border-box. So the background image is drawn from the padding-box, or if it’s set to Content-Box, the background image is drawn from the Content-Box.
background-repeat
This attribute is best understood as the way the background image is repeated. Commonly used values are repeat-x, repeat-y, repeat, space, round and no-repeat. The default value is repeat.
3. Use CSS gradient and background properties to cut corners
Conventional cutting Angle
We already know that linear gradients can make stripes, but can we also use linear gradients to make corners cut? The answer is yes.
The code is as follows:
.banner {
width: 200px;
height: 150px;
margin-top: 100px;
background: #58a;
background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
linear-gradient(-135deg, transparent 15px, #58a 0) top right,
linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}Copy the codeFirst we define an element of class named banner, set its width and height, and then set four background images, each at 50% width and height. Top left, top right, bottom right, bottom left. Set its repeat mode to no-repeat.
For each background image, we set a gradient background with the start color transparent, gradient-line Angle 135deg, gradient length 15px, and other gradients as the background color of the. Banner. Because of the stripe gradient, visually we see an element with a corner cut off. You do the other three angles, and you end up with an element with four corners cut off.
Arc corner cut
Now that we have implemented the tangent element, the arc tangent is very simple, just change the linear gradient to radial gradient, and the code is as follows:
.arc {
width: 200px;
height: 150px;
margin-top: 100px;
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) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}Copy the codeThe above code will not be explained.
We know the way to achieve the Angle cutting, then the beginning of the article Angle cutting navigation implementation is also a logical, here will not stick code, left for you to think.