Make corner cut image with CSS easily

52
shares
Share on Facebook
Share on Twitter
Share on Google+
Share on LinkedIn
Pin to Pinterest
Share on StumbleUpon
+
What's This?

Hey coders. I am coming here a little tips for you. I am going to share my idea to make image container as like above. To make this we need only a few CSS. Our image container is 270×335. Lets begin:

Here my HTML code for this:

now open your style.css file, lets write some initial css,

Now our image box looks like this:

Screenshot_2

Look we get top-left corner as we want. Now we should make other parts as designed. Lets do that. If we increase width and height on image_main_box class by 360 and 600 we get our div as like this:

Screenshot_3

but it looks there is an extra cutting edge, lets solve this. I add 10px in margin-top and -10px at margin-left.

Screenshot_4

see our image is as like we want. But, there is a hidden problem till now. What is that?? right! Lets find out. I we check of box class height with inspect element we can see its a big container. But our container should same as image size. Our accepted size is 270×335. So how can we get it? In this case I add this width and height at the box class. And declare overflow hidden. Lets see the result:

Screenshot_5

Owwww !!!!!!! where is the other portion of image :O :O :O Don’t worry guys. To get full image just add to property here:

Lets take a look:

Screenshot_6

see our image absolutely fit with our required container. Easy right???? 😀 😀 Code is Really Fun 😉

 

Here is our final code with Live Preview:

See the Pen BodWOm by Nasir (@kdurjoy) on CodePen.

Share on Facebook
Share on Twitter
Share on Google+
Share on LinkedIn
Pin to Pinterest
Share on StumbleUpon
+

2 comments on “Make corner cut image with CSS easily”

  1. Rasel Ahmed says:

    vala lagla frnc. aman past ara ci. tanks.

Leave a Reply

Your email address will not be published. Required fields are marked *