使用CSS，能否掩盖或剪裁图像的形状？

Question

使用CSS，能否掩盖或剪裁图像的形状？

23

我正在尝试用CSS创建这个设计。这可能吗？

the design is it:

这是我的代码：

.triangle{
    border-radius: 50%;
    width: 120px;
    height: 120px;
}
.triangle img {
    width: 120px;
    height: 120px;
}
.triangle::after{
    right: 150px;
    top: 50%;
    border: solid transparent;
    content:"";
    height:  0px;
    width:  0px;
    position: absolute;
    pointer-events: none;
    border-color: white;
    border-left-color: white;/*white is the color of the body*/
    border-width: 60px;
    margin-top: -60px
}

<div class="triangle">
    <img src="http://deskode.com/images/placeholder/team/07.jpg">
</div>

三角形已经形成，但与图片不完全相同。

jsFiddle

- grijalvaromero

我现在无法测试，但在.triangle上使用overflow: hidden应该会有所帮助。 - t.niese

1

我会看一下CSS剪切蒙版。CSS Clipping Masks - Austin Brunkhorst

5个回答

16

只需一个类。

http://jsfiddle.net/koh36dsz/1/

.wedge {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 0px solid red;
  border-bottom: 60px solid red;

}

<div class='wedge'></div>

- superUntitled

非常感谢您，最后我将使用这个简单的代码：D - grijalvaromero

15

虽然Hidden Hobbes已经提供了一个很好的答案，但还有另一种方法是通过旋转div和图像来实现。不过，这需要一个相当大的图像，它将被裁剪。基本代码如下：

    .triangle{
        border-radius: 50%;
        width: 120px;
        height: 120px;
        margin:0 auto;
        transform: rotate(-45deg);
        position: relative;
        overflow:hidden;
        border-radius: 0 50% 50% 50%;
    }
    .triangle img{
        width: 200%;
        height: 200%;   
        transform: rotate(45deg);
        position: relative;
        left: -60px;
        top: -30px;
    }

演示

- Paul

这里的@HiddenHobbes是指卡尔文和霍布斯，而不是加拉德里尔和霍比特人^^ - FelipeAls

+1 这种方法的优点是它可以用于具有不同背景颜色/图像的父元素。哦，我绝对不是霍比特人！:P - Hidden Hobbes

再次道歉，我非常抱歉，我喜欢Calvin&Hobbes，不应该让它从我的注意力中溜走。 - Paul

@Paul，没问题，别担心！ :) - Hidden Hobbes

10

这是基于@HiddenHobbes答案和@misterManSam的评论的版本，其中容器完全透明。

http://jsfiddle.net/jkz8bkb8/1/

body {
    background: #f00;
}
.triangle {
    overflow: hidden;
    position: relative;
    width: 90px;
    height: 90px;
    margin: 15px;
    transform: rotate(45deg);
}
.triangle img {
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    height: 120px;
    transform: rotate(-45deg);
}

<div class="triangle">
    <img alt="" src="http://placehold.it/120x120" />
</div>

- Chris Spittles

1

@grijalvaromero - 我创建了一个分支，可以消除不必要的元素。 - misterManSam

5

正如Austin Brunkhorst在评论中指出的那样，可以使用SVG剪切。我已经组合了一个快速的Fiddle展示如何完成，并将HTML代码添加如下：

<svg width="120px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="mask">
            <path d="M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z" fill="red"  transform="rotate(-135 133 120)" />
        </clipPath>
    </defs>
    <image xlink:href="http://placehold.it/120x100" x="0" y="0" height="100px" width="120px"  clip-path="url(#mask)" />
</svg>

值得注意的是，我不是专家，但我敢打赌，如果你能正确地调整d值，path元素中的transform属性可以被删除。

- James Long

这其实是最简单的答案XD。应该使用更多的标记来格式化文本和回答。+1 - Persijn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hidden Hobbes · Accepted Answer

这可以仅使用 CSS 实现。伪元素:before和 :after 用于制作三角形（相对于容器定位），而border-radius创建圆角。

.triangle {
    border-radius: 0 60px 60px 0;
    height: 120px;
    overflow: hidden;    
    position: relative;
    width: 120px;
}
.triangle:before, .triangle:after {
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
}
.triangle:before {
    border-right: 60px solid transparent;
    border-top: 60px solid #FFFFFF;
    top: 0;
}
.triangle:after {
    border-bottom: 60px solid #FFFFFF;
    border-right: 60px solid transparent;
    bottom: 0;
}

<div class="triangle">
    <img alt="" src="http://placehold.it/120x120" />
</div>

JS Fiddle：http://jsfiddle.net/rw7q2te2/1/