是否可以使用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剪辑是可能的.我已经整理了一个快速的小提琴,展示了它是如何完成的,我将在下面添加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.