Игорь Игорь - 22 days ago 7
CSS Question

How to make image with cut corners?

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

<div>
<img src="somepic" />
</div>


enter image description here

Answer

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;
background-color:rgb(0,0,0);
}

div {
display:inline-block;
position:relative;
width: 100px;
height: 100px;
margin-right:72px;
}

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

div:nth-of-type(n+2)::after {
content:'';
display:block;
position:absolute;
top:-30px;
left:-30px;
width: 124px;
height: 124px;
border: 18px solid rgb(255,255,255);
transform:rotate(45deg);
}

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>

Comments