Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Hess
Courses Plus Student 2,774 PointsHow does one create diamond-shaped photos in CSS?
I understand border radius, but is there a property or value to diamond-shape them?
Richard Duncan
5,568 PointsHi Michael, do you mean a diamond or a losange shape?
6 Answers
Richard Duncan
5,568 PointsI stumbled upon Gaurav Singh's codepen also. Having tinkered with it it does seem stable to me and I would personally re-use - example here.
HTML
<div class="losange">
<div class="los1">
<img src="http://photos-d.ak.instagram.com/hphotos-ak-xpa1/10483342_1471091656483347_532843009_n.jpg" />
</div>
</div>
CSS
.losange, .losange div {
margin: 0 auto;
transform-origin: 50% 50%;
overflow: hidden;
width: 250px;
height: 250px;
}
.losange {
transform: rotate(45deg) translateY(10px);
}
.losange .los1 {
width: 355px;
height: 355px;
transform: rotate(-45deg) translateY(-74px);
}
.losange .los1 img {
width: 100%;
height: auto;
}
Michael Hess
Courses Plus Student 2,774 PointsThanks!
Michael Hess
Courses Plus Student 2,774 PointsI've created them for mockups in Photoshop, but I was just wondering if there was a CSS method.
Timothy Hooker
15,323 PointsThis looks cool
Michael Hess
Courses Plus Student 2,774 PointsRichard, I'm using a diamond for a current site I'm working on, but a lozenge shape wouldn't be bad to know in the future as well!
Michael Hess
Courses Plus Student 2,774 PointsOh, sweet action! Thanks, Richard!
Timothy Hooker
15,323 PointsTimothy Hooker
15,323 PointsIt's not super simple but there's a trick at this link where you use a pseudo element to fill out the shape.
http://css-tricks.com/examples/ShapesOfCSS/
I haven't done it but if I were you I would take that tip and either apply it directly to your image (with overflow: hidden; or use your image as the background.)