How Can I Create Angled Corners with CSS and Maintain a Border?

Creating Angled Corners with CSS

Many strive to achieve complex designs using CSS, and creating an angled corner is one such endeavor. One might wonder if it's feasible to clip an image within such a shape, akin to using a mask that simultaneously retains the grey border.

One may consider utilizing canvas or SVG for this task. However, it's possible to achieve a similar effect with pure CSS by employing :before and :after elements within a parent container.

First, assign a border to the parent container. Then, add a :before element to block out a corner and offset it by -1px to cover the border. Finally, introduce a :after element with a slight offset from the :before to create the inner line of the cut-off.

Despite this method, maintaining the thickness of the 45-degree line remains a slight challenge.

Consider the following CSS and HTML code:

.cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}

<div>

This approach approximates the desired angled corner while preserving the border.

The above is the detailed content of How Can I Create Angled Corners with CSS and Maintain a Border?. For more information, please follow other related articles on the PHP Chinese website!