How to crop image with css - html

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?

Answer 1

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")'> </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
}

Answer 2

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);

Answer 3

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

Answer 4

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/