Игорь Игорь - 1 year ago 94
CSS Question

How to make image with cut corners?

Is it real to make image with cut-off corners?

<img src="somepic" />

enter image description here

Answer Source

Normally, if you just want to give an image rounded corners, you can declare a border-radius (without actually giving the image a border of any width).

If you are explicitly looking to create an image with cut-off corners like the one displayed in your question, you can achieve this effect with an ::after pseudo-element, which is transparent, has a border and is rotated 45 degrees.

In the example below there are three images.

  • The first image has no border, but it does have a border-radius applied.

  • The second image has an ::after pseudo-element, which is transparent, has a white border and is rotated 45 degrees.

  • The third image is the same as the second image, but the border of the pseudo-element is red, so you can more clearly see what is going on and how the effect works.

img {
width: 100px;
height: 100px;

div {
width: 100px;
height: 100px;

div:nth-of-type(1) img {
border-radius: 12px;

div:nth-of-type(n+2)::after {
width: 124px;
height: 124px;
border: 18px solid rgb(255,255,255);

div:nth-of-type(3)::after {
border: 18px solid rgb(255,0,0);
<div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div>
<div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div>
<div><img src="http://static.pexels.com/photos/67211/field-away-summer-sky-67211.jpeg" /></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download