Question

我想使用css裁剪方形图像，如附图所示。但是也使用右边的文字，那我怎么会意识到整个容器？</ p>

<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

使用此CSS：

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

clip属性的格式如下：

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

Answer 2

解决方案在这里（编辑，现在更加清洁和灵活）：

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

如何用css裁剪图像

4 个答案: