如何用css裁剪圖像

Question

我想使用css裁剪方形圖像，如附加圖像上所示。但也使用右邊的文字，我怎麼會意識到整個容器？

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

看到提琴在這裏：https://jsfiddle.net/hgo62n6a/如何裁切圖像？

Answer 1

解決方案就在這裏（編輯，現在和fl更清潔靈活）：

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 
} 

Answer 2

使用此CSS：

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

爲clip屬性的格式如下：

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

Answer 3

請參考這一個：

.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

希望這將幫助你..

下面是HTML代碼：

<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代碼：

.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/