是否可以使用CSS遮罩或剪切图像的形状？
我想在CSS中创建这个设计。可能吗？是否可以使用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>三角形形成，但不以相同的方式作为图像。
只有一个班级。
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>
：o非常感谢你在最后我会留下这个简单的代码：D – grijalvaromero 2014-11-06 19:21:53
这可以只用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>我赞赏你的聪明才智，但是对三角形形状使用边框意味着当放置在不同的颜色背景上时，颜色不会透出。 – 2014-11-06 09:36:24
@ChrisSpittles确实如此，三角形的'border-color'需要设置为与包含'.triangle'的元素相同的'background-color'才能工作。在这种情况下，我认为这不是一个问题（除非grijalvaromero想纠正我！），因为OP没有具体说明这需要适用于不同的背景颜色，而border-left-color：white; *白色是身体的颜色* /代码中的''表明这将用于白色背景。 – 2014-11-06 09:45:55
是否可以使用'border-color：inherit'作为不同背景颜色问题的一个骇人的解决方法？我想，必须将容器的边框颜色设置为与背景相同。 – Svish 2014-11-06 11:20:28
虽然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;
}
这是基于@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>是非常感谢你正是我所需要的 – grijalvaromero 2014-11-06 19:19:43
@grijalvaromero - 我[创建了一个叉]（http://jsfiddle.net/jkz8bkb8/），它消除了不必要的元素。 – misterManSam 2014-11-10 05:24:06
奥斯汀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属性可以是如果您可以计算出如何正确调整d值，请从path元素中删除。
这是现实最简单的答案XD。应该使用更多的标记来设置文本和答案的格式。 +1 – Persijn 2015-06-04 21:01:28
我无法测试，但现在一个'溢出：上hidden'了'.triangle'应该有所帮助。 – 2014-11-06 09:19:34
我会看看[CSS Clipping Masks]（http://www.html5rocks.com/en/tutorials/masking/adobe/）。 – 2014-11-06 09:21:19