如何在CSS中制作三角圆角三角形

我希望不使用Javascript实现如下自定义颜色形状：

目前，我正在一个橙色的矩形div上覆盖一个“frame”的图像，但这是非常粗糙的。

---

我想我可以使用动态生成的画布元素，但这不仅需要JS，还需要HTML5画布支持。有什么想法吗？

使用某种图像。这就是图像的用途。如果需要缩放，则只需使用png作为背景，如果它是内容的一部分，则使用

元素

如果您必须将其保存在CSS文件中，您可以尝试（IE7及以下版本不支持）

.triangle，.triangle:before，.triangle:after{宽度：4em；高度：4em；}
.三角形{
溢出：隐藏；
位置：相对位置；
保证金：7em自动0；
边界半径：20%；
变换：平移（50%）旋转（30度）倾斜（30度）缩放（.866）；
光标：指针；
指针事件：无；
} 
.三角形：之前，.三角形：之后{
位置：绝对位置；
背景：橙色；
指针事件：自动；
内容：''；
}
.三角：以前{
边界半径：20%20%20%53%；
变换：scaleX（1.155）歪斜（-30度）旋转（-30度）平移（-42.3%）
斜纹（30度）鳞片（.866）平纹（-24%）；
}
.三角形：之后{
边界半径：20%20%53%20%；
变换：scaleX（1.155）歪斜（-30度）旋转（-30度）平移（-42.3%）
斜纹（-30度）鳞片（.866）平纹（24%）；
}
/**显示其工作方式的其他样式**/
.triangle:悬停{溢出：可见；}
.triangle:hover:before，.triangle:hover:after{background:none；}
.triangle:悬停，.triangle:悬停：之前，.triangle:悬停：之后{
边框：虚线1px；
}

---

安娜的回答启发我尝试另一种方法，这种方法虽然不完美，但至少是对称的。这是一个真实尺寸的预览，放大了。这是一个简单的边界hack trangle，包裹在剪切圆/边界半径中：

和代码（通过单个

font size

属性调整整体大小）：

在这里玩：

我的最佳尝试：

任何尺寸的像素完美，使用比Ana原始解决方案更简单的数学，在我看来更直观：）

.triangle{
位置：相对位置；
背景颜色：橙色；
文本对齐：左对齐；
}
.三角：以前，
.三角形：之后{
内容：''；
位置：绝对位置；
背景色：继承；
}
.三角形，
.三角：以前，
.三角形：之后{
宽度：10em；
高度：10公分；
边界右上角半径：30%；
}
.三角形{
变换：旋转（-60度）倾斜（-30度）比例（1.866）；
}
.三角：以前{
变换：旋转（-135度）倾斜（-45度）缩放（1.414，.707）平移（0，-50%）；
}
.三角形：之后{
变换：旋转（135度）倾斜（-45度）比例（.707,1.414）平移（50%）；
}

---

玩弄默里·史密斯最受欢迎的版本。将其作为手写笔混合编写，修复了一些边距问题，并添加了方向选项。mixin还可以将三角形缩放到像素级的完美大小。测试不太好。慎用

然后将mixin添加到您的类中

    .triangle
      &.up
        triangle()
      &.down
        triangle(down)
      &.left
        triangle(left)
      &.right
        triangle(right)

---

我看到有人想要一个等腰三角形，通过对上面被接受的答案进行一些修改，我发现了如何操纵它来得到我想要的，因为我需要同样的答案。这将有助于在圆角三角形中寻找细微变化的任何人

您会注意到，我分离出宽度、高度和边框右上角半径，然后继续更改边框右上角半径以形成角。我唯一更改的另一件事是元素上的transform属性。你可以按照你认为合适的方式塑造它，但这些似乎是唯一必要的改变

.diff箭头{
左边距：30px；
位置：相对位置；
背景色：#20C0F1；
文本对齐：左对齐；
宽度：10em；
高度：10公分；
边界右上角半径：20%；
}
.diff-arrow：之前，
.diff箭头：之后{
内容：''；
位置：绝对位置；
背景色：继承；
宽度：10em；
高度：10公分；
边界右上角半径：15%；
}
.diff箭头{
变换：旋转（-45度）斜X（0度）比例（0.5）；
}
.diff箭头：之前{
变换：旋转（-135度）倾斜（-45度）缩放（1.414，.707）平移（0，-50%）；
}
.diff箭头：之后{
变换：旋转（135度）倾斜（-45度）比例（.707，1.414）平移（50%）；
}

——简化版--

在我的例子中，我需要文本来伴随三角形图标和三个圆角，但是

溢出：隐藏建议根本不起作用，因为文本最终被隐藏

最终结果：
…演示：

通过使用
剪辑路径
，我可以实现类似的遮罩。注意：在IE中不起作用；然而，大多数人已经停止支持IE，尤其是自从微软停止支持IE以来。在他们的新边缘浏览器中效果很好

HTML:

在CSS中，三角形是
：在
伪元素之后。
首先，我们使用
剪辑路径创建三角形：


.triangle{
显示：内联块；
宽度：150px；
颜色：橙色；
}
.三角形：：之前{
内容：“；
显示：块；
填充顶部：86%；
背景：彩色；
剪辑路径：多边形（50%0，100%100%，0.100%）；
}
从典型的边框三角形开始，然后将svg过滤器添加到三角形中


.c-paper-plane{
位置：相对位置；
}
.现场{
变换样式：保留-3d；
变换：旋转3d（0.2，-1，-0.8，-177度）；
}
纸平面{
变换：rotateX（0）translateZ（-3px）；
变换原点：中心；
}
.纸尾{
变换：旋转（0deg）平移（31px，10px）平移（-5px）；
变换原点：中心；
填充物：灰色；
}
.纸尾部{
变换：旋转（269deg）平移（237px，55px）平移（139px）；
填充物：灰色；
变换原点：中心；
位置：绝对位置；
排名：0；
宽度：0；
身高：0；
边框顶部：100px纯红；
右边框：150px实心透明；
筛选器：url(
    triangle(direction = up, color = #333, size = 32px)
        position: relative
        background-color: color
        width:  2*(round(size/3.25))
        height: 2*(round(size/3.25))
        border-top-right-radius: 30%
        &:before,
        &:after
          content: ''
          position: absolute
          background-color: inherit
          width:  2*(round(size/3.25))
          height: 2*(round(size/3.25))
          border-top-right-radius: 30%

        if direction is up
          transform: rotate(-60deg) skewX(-30deg) scale(1,.866)
          margin: (@width/4) (@width/2.5) (@width/1.2) (@width/2.5)

        if direction is down
          transform: rotate(-120deg) skewX(-30deg) scale(1,.866)
          margin: 0 (@width/1.5) (@width/1.5) (@width/6)

        if direction is left
          transform: rotate(-30deg) skewX(-30deg) scale(1,.866)
          margin: (@width/5) 0 (@width) (@width/1.4)

        if direction is right
          transform: rotate(-90deg) skewX(-30deg) scale(1,.866)
          margin: (@width/5) (@width/1.4) (@width) 0

        &:before
          transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%)
        &:after
          transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%)

    .triangle
      &.up
        triangle()
      &.down
        triangle(down)
      &.left
        triangle(left)
      &.right
        triangle(right)

<span class="warning">
    Mandatory
</span>

.warning {
    position: relative;
    display: inline-block;
    font-weight: bold;
    color: #FF5500;
}
.warning:before {
    position: absolute;
    top: 50%;
    right: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    transform: translateY(-36%);
    text-shadow: 0 0 7px #111111;
    z-index: 1;
    content: '!';
}
.warning:after {
    display: inline-block;
    margin-left: 3px;
    font-size: 5px;
    border: solid 3em transparent;
    border-top-width: 0;
    border-bottom-width: 5em;
    border-bottom-color: #FF5500;
    clip-path: circle(54% at 50% 69%);
    vertical-align: bottom;
    content: '';
}