Html 是否可以遮罩或剪辑图像'；使用CSS的形状是什么？

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

这是我的代码：

.triangle{
边界半径：50%；
宽度：120px；
高度：120px；
}
.三角形img{
宽度：120px；
高度：120px；
}
.三角形：：之后{
右：150px；
最高：50%；
边框：实心透明；
内容：“；
高度：0px；
宽度：0px；
位置：绝对位置；
指针事件：无；
边框颜色：白色；
左边框颜色：白色；/*白色是主体的颜色*/
边框宽度：60px；
利润上限：-60px
}

---

这只需使用CSS即可实现。伪元素

：before

和

：after

用于生成三角形（相对于容器定位），而

边界半径

创建圆角

.triangle{
边界半径：0 60px 60px 0；
高度：120px；
溢出：隐藏；
位置：相对位置；
宽度：120px；
}
.三角形：之前，.三角形：之后{
内容：“；
身高：0；
左：0；
位置：绝对位置；
宽度：0；
}
.三角：以前{
右边框：60px实心透明；
边框顶部：60px实心#FFFFFF；
排名：0；
}
.三角形：之后{
边框底部：60px实心#FFFFFF；
右边框：60px实心透明；
底部：0；
}

虽然已经提供了一个很好的答案，但还有另一种方法，旋转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;
    }

---

这是一个基于@hiddenhobes answer和@misterManSam评论的版本，其中容器是完全透明的

正文{
背景：#f00；
}
.三角形{
溢出：隐藏；
位置：相对位置；
宽度：90px；
高度：90px；
利润率：15px；
变换：旋转（45度）；
}
.三角形img{
边界半径：50%；
位置：绝对位置；
右：0；
排名：0；
宽度：120px；
高度：120px；
变换：旋转（-45度）；
}

---

正如奥斯汀·布伦霍斯特在评论中指出的那样，可以使用。我已经整理了一个快速演示如何完成的示例，我将在下面添加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

值，

transform

属性可以从

path

元素中删除

.wedge{
宽度：0px；
高度：0px；
右边框：60px实心透明；
边框顶部：60px纯红；
左边框：0px实心红色；
边框底部：60px实心红色；
}

我现在无法测试，但是

三角形上的
溢出：隐藏
应该会有帮助。我想看看。我很欣赏你的独创性，但是三角形形状使用边框意味着当放置在不同的颜色背景上时，颜色不会显示出来。@ChrisSpittles这是真的，三角形的
边框颜色
需要设置为与包含
.triangle
的元素相同的
背景颜色
，才能工作。我认为在这种情况下这不是一个问题（除非grijalvaromero想纠正我！），因为OP没有明确说明这需要适用于不同的背景颜色和
边框左侧颜色：白色/*白色是主体的颜色*/
在代码中表示将在白色背景上使用此颜色。
边框颜色：inherit
是否可以用作解决不同背景颜色问题的一种黑客方法？不过，我想您必须将容器的边框颜色设置为与背景相同的颜色。@Svish这样行，虽然正如您所注意到的，您仍将在不同的位置声明边界颜色。它是@hiddenhobes，如Calvin和Hobbes中的@hiddenhobes，而不是Galadriel和Hobbits^^+1。这种方法的优点是，它可以用于具有不同背景颜色/图像的父元素。哦，我绝对不是霍比特人帕根，我真的很抱歉，我爱卡尔文和霍布斯，不该让我忘记。@Paul，没问题，别担心！：）：o非常感谢，最后我将继续使用以下简单代码：D@grijalvaromero-I，它消除了不必要的元素。这是最简单的答案XD。应该使用更多的标记来格式化文本和答案+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>