Can CSS Create Angled Corners and Clip Images While Maintaining a Visible Border?

CSS Angled Corner Creation and Image Clipping

Can CSS be leveraged to create a specific shape, entailing a 45-degree angled corner? Additionally, the requirement includes clipping an image within the shape, akin to employing a mask where the gray border remains visible.

Exploring the feasibility of this task strictly within CSS, it becomes apparent that maintaining the border poses challenges. Nevertheless, a solution has been devised utilizing the :before and :after pseudo-elements in conjunction with a parent container. Since :before and :after cannot be applied directly to an img tag, the following approach is adopted:

1. Establish a border for the container element.
2. Create a :before element to obstruct a corner and offset its positioning by -1px to conceal the border.
3. Add a :after element with a slight offset from the :before element to generate the line inside the cutaway.

While this approach approximates the desired effect, it encounters an issue with the thickness of the 45-degree angled line. Here's the CSS code snippet:

.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;
}

And here's an HTML example:

<div class="cutCorner">
  <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

The above is the detailed content of Can CSS Create Angled Corners and Clip Images While Maintaining a Visible Border?. For more information, please follow other related articles on the PHP Chinese website!