How to crop image with css

Question

I want to use css to crop a square image like seen on the attached image. But also using the text on the right so how would I realize that whole container?

<div style="width:100%">
<div style="widht:50%; float:left">
My Texting
</div>
<div style="widht:50%; float:left">
<img src="myimage.png">
</div>
</div>

See fiddle here: https://jsfiddle.net/hgo62n6a/ How to crop the image?

You'd have to create them as two separate halves and position accordingly (or just cut the image and place above a div). Have a look at http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive for info on how to produce such shapes. Not an exact dupe but you can use the same technique (SVG, clip-path etc) — Harry, Sep 05 '15 at 09:46

score 1 · Answer 1 · answered Sep 05 '15 at 09:49

1

Use this CSS:

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

The format for the clip attribute is as follows:

clip: rect(top, right, bottom, left);

answered Sep 05 '15 at 09:49

Okx

353
3
23

You can position it using `top: 220px; left: 0px;` https://jsfiddle.net/hgo62n6a/8/ – Okx Sep 05 '15 at 09:57
Still the same behavior.. might this be a browser issue? – Marc Ster Sep 05 '15 at 10:05
Works for me though. I'm using `Google Chrome`. – Okx Sep 05 '15 at 10:06
I mean it just crops the image straight down, but I want it to look like seen on the image I posted – Marc Ster Sep 05 '15 at 10:15

Michael Mammoliti · Accepted Answer · 2015-09-06T09:44:49.467

Solution is here (edited, much cleaner now and flexible):

DEMO: jsFiddle

HTML:

<div class='section clearfix'>

    <div class='section-content section-col section-col-left'>
        <div class='padding'>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div> <!-- end of .section-content -->


    <div class='section-bar clearfix'>
        <table>
            <tr>
                <td><a href=''>item 1</a></td>
                <td><a href=''>item 2</a></td>
                <td><a href=''>item 3</a></td>
            </tr>
        </table>
    </div> <!-- end of .section-bar -->

<div class='section-bg' style='background-image: url("http://www.ysecit.com/css/images/bg-original.jpg")'>&nbsp;</div>

CSS:

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-sizing: border-box
}

.clearfix {
    display: table;
}
.clarfix ::after{
    content: "";
    display: block;
    clear: both;
}

.padding{
    padding: 40px;
}

.section {
    position:relative;
    overflow: hidden;
}

.section-col{
}

.section-col-left {
    float: left
}

.section-content {
    width: 50%;
    left: 0;
    z-index: 3;
    position: relative;
}


.section-content::before {
    display: block;
    width: 0;
    content: "";
    position: absolute;
    top: 0;
    right: -40px;
    border: 1000px solid #fff;
    border-right: 200px solid transparent;
    z-index: 2;
}

.section-content div {
    position: relative;
    z-index: 3;
}

.section-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: top right;
    background-repeat: no-repeat;
}

.section-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #000;
    z-index: 2
}
.section-bar table {
    float: right;
}
.section-bar table tr td {
     padding: 10px   
}
.section-bar table tr td a{
    color: #fff
}

score 0 · Answer 3 · answered Sep 05 '15 at 09:51

please refer this one:

.holder {
    width:  200px;
    height: 200px
}
.holder:before {
    content:"";
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-left: 20px solid transparent;
    border-right: 20px solid white;
    border-bottom: 20px solid white;
    position:absolute;
    top:  169px;
    left: 169px;
}
img {
    width: 100%;
    height: 100%;
}

DEMO

score 0 · Answer 4 · answered Sep 05 '15 at 10:25

Hope this will help you..

Here is Html code:

<div style="width:100%">
<div style="widht:50%;float:left;
            background-color:#efefef;
            height:200px
            ;width:300px;" class="cutCorner">
My Texting
</div>
<div style="widht:50%; float:left;" >
<img style=height:200px;width:300px;" 
    src="http://www.mobilo-med.de/uploads/media/Push_up_girl.jpg">
</div>
</div>

Css Code:

    .cutCorner {
    position:relative;
    border:1px solid transparent; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-bottom: 310px solid white;
    border-left: 310px solid transparent;
}

https://jsfiddle.net/Harpreet_devgun/hgo62n6a/12/

How to crop image with css

4 Answers4