是否可以使用CSS掩盖或剪裁图像的形状？

Question

我正在尝试在CSS中创建此设计。有可能吗？

这是我的代码：

.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

Answer 1

这可以使用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小提琴： http://jsfiddle.net/rw7q2te2/1/

Answer 2

单班。

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>

Answer 3

虽然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;
    }

<强> DEMO

Answer 4

这是一个基于@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>

Answer 5

正如Austin Brunkhorst在评论中指出的那样，可以使用SVG clipping。我已快速汇总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>

值得指出的是，我不是专家，如果你能弄清楚如何正确调整transform，我敢打赌path属性可以从d元素中删除}值。