Learn how to rotate an image then crop in on it to create a diamond shape—all with CSS. This may sound scary with some math calculations and theories, but we’ve included the formulas that can be used over and over again! So you can crop and rotate an image without photo editing software and change your mind on the fly.
- [Instructor] Hi, I'm Chris Converse and in this episode we'll rotate an image and then crop it to create a diamond shape using only CSS. So if you'd like to follow along with me download the exercise files and we'll begin by opening the HTML file in a text editor. And now once you have the HTML file opened up in the head area you'll see a link to style dot CSS, we'll be opening this in a moment. If you look inside of the HTML you'll see a series of elements, heading elements and paragraph elements and we also have a figure here and inside of the figure is an image element.
So what we're gonna be doing is rotating the figure elements and then rotating the image in a negative direction in order to keep it straight the way we see over here in the preview. And then we're gonna create a calculation so that we can size the image inside of the figure. So to do all of this let's go back to the exercise files and let's open up the style dot CSS file in our text editor. And so now in the CSS file let's scroll down, let's find the rule that targets the figure element. The first thing I wanna do here is add a border so we can see what's going on with our transformations.
So I'll type border colon space, one pixel for the size, solid for the style and then we'll just make it black so pound sign and three zeros. Save your CSS, we'll now see in the browser we have a border on the figure element. Next still inside of the figure rule, let's come in here and let's rotate the figure. So we'll type transform colon space then type rotate, beginning and ending parenthesis then a semi colon, then inside of the parenthesis we'll set this to 45 and then DEG for degrees.
We'll hit save, go back to the browser and we'll now see that the figure element is being rotated. You'll also notice that the image inside of the figure is also being rotated. So let's come down to the rule that targets the image inside of the figure. So figure space image, after the width property let's come in here and add a transform. We'll set this to rotate as well, put in our parenthesis then a semi colon, and now we're gonna set this to negative 45 degrees. Let's hit save, go back to the browser and we'll now see that the image is now straight again.
Now in order to make sure that the image doesn't break outside of the figure element, let's go back into the figure rule in our CSS and let's add an overflow property. So we'll type overflow colon space then hidden, then a semi colon. Save your work and now the image will be conformed or cropped based on the figure element. And so now with this in place the next thing we need to do is calculate the width of the image inside of the figure. And now if we think about our square in terms of being two right triangles, we can use the Pythagorean Theorem to figure out what the width should be.
So let's quickly take a look at how we're gonna calculate this. So we're gonna start with 200, both for A and B which is the size of our figure element. Then we're gonna square those numbers which is going to give us 40,000. Then we're gonna add 40,000 to 40,000 which is going to give us 80,000 and 80,000 is gonna be equal to C squared. So to solve for C we're going to take the square root of 80,000 and that's gonna give us 282.8. And now we need to figure out how much larger 282.8 is from 200.
And we can do that by taking 282.8 and dividing it by 200 which equals 1.414. And then we can simplify that down to 141%. So the image needs to be 41% larger than the figure element that it's inside of. And the nice thing here is if you're always working with a square, this is always going to be the number you can use. So you won't have to do this calculation every time. So back in our CSS file let's come down to our image inside of the figure, let's change the 100% value to 141%, let's hit save.
Now we'll see over in the preview that the width is matching exactly on the corners. And now let's make an adjustment so that we don't have the extra space across the top. So after the width property back in the CSS let's come in here and set a margin dash top property. And we're gonna set this to a negative value and we wanna use half of that 41% that we're going above a hundred for the width. And that's gonna be 20.5. So we're gonna set this to negative 20.5%, let's duplicate this line and let's set the margin left to the same value.
And now with these two margin properties in place go back to the browser and hit reload. And you'll now see that the image is completely filling the figure element. And now so the great thing about this technique is since we used percentage values we can come back to the CSS and change the height and width of the figure element. I'll bring this down to a hundred, save our work and back in the browser we'll see that everything will scale and proportion. Or I'll come back to the CSS and change the size from 100 up to 300, hit save, go back to the browser and again we'll see everything will scale in proportion.
So back in the CSS I'll set this back to 200 for the height and the width. Let's come down here in the figure element and remove the border property. And then let's come up and adjust the margin properties. So for the margin top, the first value, we're gonna set this to 25 pixels. For the margin right property let's set this to 15 pixels. For the bottom we'll set this to 40 pixels, and for the left we're gonna set this to 65 pixels. And so with all of these in place let's hit save, let's go back to the browser and hit reload.
So with some transform properties and percentage based values we now have some CSS rules that you can use for any square photo that you'd like to crop into a diamond shape. And so with that I'll conclude this episode and as always, thanks for watching.
Author
Updated
12/11/2018Released
12/6/2016Skill Level Intermediate
Duration
Views
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.
Related Courses
-
CSS to Sass: Converting an Existing Site
with John Riviello2h 31m Intermediate -
CSS: Animation
with Val Head1h 59m Intermediate
-
Introduction
-
Welcome34s
-
-
February 2019
-
Multiple background images3m 34s
-
OpenType swashes2m 36s
-
Photo gallery, part 14m 17s
-
Photo gallery, part 26m 38s
-
-
January 2019
-
Accordion panels5m 39s
-
Border image3m 54s
-
Aspect ratio3m 37s
-
Style by download type6m 51s
-
-
December 2018
-
Every nth element4m 58s
-
Layout patterns5m 17s
-
Style placeholder text2m 25s
-
-
July 2018
-
Diamond-shaped image crop5m 50s
-
Responsive iframes5m 42s
-
Create a star10m 33s
-
Color SVG with CSS5m 45s
-
Style a progress bar10m 48s
-
Curve your header4m 4s
-
Striped pattern with CSS4m 46s
-
-
June 2018
-
Clip an image3m 53s
-
Vertically aligned columns2m 47s
-
Gradient text4m 2s
-
May 2018
-
Create a speech bubble6m 20s
-
Animate SVG elements3m 37s
-
See more links7m 54s
-
April 2018
-
Create a vignette5m 47s
-
Create variables6m 33s
-
CSS not selector4m 4s
-
Parallax scroll effect4m 26s
-
-
March 2018
-
Filter a list7m 35s
-
3D shadow text3m 25s
-
Show URLs when printing4m 19s
-
Style breadcrumb links5m 27s
-
-
February 2018
-
Box sizing to the rescue4m 24s
-
Set text on an angle4m 12s
-
Triangle bullets3m 51s
-
Force text to wrap2m 8s
-
-
January 2018
-
Animate a sprite sheet5m 19s
-
Style telephone links4m 12s
-
December 2017
-
Sticky footers2m 45s
-
Selection colors3m 28s
-
November 2017
-
Detect screen resolution5m 1s
-
Continue a numbered list4m 46s
-
Add a QR code for print4m 56s
-
Interactive tab panels7m 23s
-
-
October 2017
-
Outline your text2m 56s
-
Create polka dots3m 42s
-
Gradient horizontal rule3m 22s
-
Embed SVG art in CSS3m 15s
-
Style big list numbers4m 57s
-
-
September 2017
-
Text indents3m 44s
-
Display images as grayscale2m 57s
-
Customized radio buttons7m 37s
-
-
August 2017
-
Indicating off-site links4m 15s
-
Creating a pie chart8m 42s
-
Numbering items3m 44s
-
Animating backgrounds3m 55s
-
Angled headers3m 55s
-
-
July 2017
-
Checkboxes to switches9m 36s
-
Blurring images5m 18s
-
Overlapping heading rule4m 4s
-
-
June 2017
-
Center A positioned element5m 32s
-
Put your best footer forward11m 23s
-
Mixin' it up with SASS12m 4s
-
Mixin' it up with LESS13m 15s
-
-
May 2017
-
Drop the cap5m 41s
-
Get nestled with SASS7m 4s
-
Get nestled with LESS6m 11s
-
Flex your columns5m 34s
-
Let’s focus on the focus5m 44s
-
-
April 2017
-
Expand your mobile menu6m 38s
-
Vertical and center6m 32s
-
Creating a grid9m 33s
-
-
March 2017
-
Get your links in a row8m 28s
-
Give me a few tips8m 48s
-
Setting a stylish table6m 8s
-
-
February 2017
-
Hover in a hover4m 24s
-
January 2017
-
A button for your link5m 16s
-
Visiting the visited link6m 47s
-
You can quote me5m 34s
-
A glowing property10m 11s
-
Dress up that link4m 54s
-
-
December 2016
-
Give me some background10m 45s
-
What’s your position?11m 19s
-
Let me float this by you6m 56s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Diamond-shaped image crop