如何用css裁剪图像

我想使用css裁剪方形图像，如附加图像上所示。但也使用右边的文字，我怎么会意识到整个容器？如何用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/如何裁切图像？

来源

2015-09-05 Marc Ster

你必须相应地创建它们作为两个独立的半和位置（或者只是剪切图像并放在div上方）。看看http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive关于如何产生这种形状的信息。 220px：不是一个确切的重复数据删除，但你可以使用相同的技术（SVG，剪辑路径等） – Harry

解决方案就在这里（编辑，现在和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 
}

来源

2015-09-05 12:00:15

使用此CSS：

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

为clip属性的格式如下：

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

来源

2015-09-05 09:49:17 Okx

https://jsfiddle.net/hgo62n6a/2/似乎不具有所期望的行为 –

您可以使用'顶部放置它; left：0px;'https://jsfiddle.net/hgo62n6a/8/ – Okx

仍然是相同的行为..可能这是一个浏览器问题？ –

请参考这一个：

.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

来源

2015-09-05 09:51:54

希望这将帮助你..

下面是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/

来源

2015-09-05 10:25:59

如何用css裁剪图像

回答

相关问题