CSS to achieve angle cutting and arc cutting angle effect

In the web design, sometimes encountered a number of corner-cutting style requirements, the implementation of a variety of methods, with pictures or overlay overlays, you can achieve the style of cutting angle, here the author directly with CSS to achieve the style of cutting angle.
Cut Single Corner:

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

CSS can be implemented as shown on the style, modify the angle can achieve any angle of the cutting angle effect.
Cut two corners:

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;

In the above style, the author uses two kinds of colors to facilitate the reader to understand the meaning.
Two corners are achieved, and four corners are easy.
Four Corners to achieve:

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;

The above style realizes the four angles angle cut the style, then we further thought, wants to realize the arc cutting angle how to do.
ARC Cutting angle:

As you can see, the pattern is similar to the traditional razor blade, it is not difficult to achieve this style, we use the radial gradient to replace the linear gradient can be.

Background: #58a;
Background:radial-gradient (circle at top left, Transparent 15px, #58a 0) top left, 
            radial-gradient (circle in top righ T, Transparent 15px, #58a 0) Top right, 
            radial-gradient (circle on 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;

To achieve the effect of cutting angle, there are many other programs, such as inline SVG and border-image scheme, cutting path scheme, interested readers can explore their own attempts.