Instantly share code, notes, and snippets.

Embed
What would you like to do?
A LESS Mixin to mask a square image into a diamond shape (aka 45deg square).
.diamond-inside-square (@square: 100px; @background-img) {
.square(@square);
.rotate(-45deg);
margin: @square/4;
overflow: hidden;
&:after {
.square(@square*1.5);
.rotate(45deg);
background: url(@background-img);
display: block;
content: '';
margin: -(@square/4);
}
}
<div class="square"></div>
.square {
.diamond-inside-square(280px, 'http://fillmurray.com/g/420/420');
}
@yankeyhotel

This comment has been minimized.

Show comment
Hide comment
@yankeyhotel

yankeyhotel Dec 19, 2014

Here is a very Bill Murray example. 😃
image

Owner

yankeyhotel commented Dec 19, 2014

Here is a very Bill Murray example. 😃
image

@yankeyhotel

This comment has been minimized.

Show comment
Hide comment
@yankeyhotel

yankeyhotel Dec 19, 2014

Also I am using this in the context of Bootstrap, so .square() and .rotate() are native mixins.

Owner

yankeyhotel commented Dec 19, 2014

Also I am using this in the context of Bootstrap, so .square() and .rotate() are native mixins.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment