CSS to achieve angle cutting and arc cutting angle effect

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.