Html 如何使用CSS创建带边框的透明三角形？

如何使用CSS创建以下形状

我尝试将此作为解决方案：

 .triangle:after {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        margin-top:1px;
        margin-left:2px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
    }

    .triangle:before {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid black;
    }

你可以看到它在工作。这是可行的，但有一个边界技巧。还有别的办法吗

---

使用SVG向量这很容易做到，但我不想走那么长的路。

尝试使用

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

---

以下是

尝试使用

SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

这里是

.triangle{
宽度：0；
边框底部：实心30px黑色；
右边框：实心30px透明；
左边框：实心30px透明；
}

.triangle{
宽度：0；
边框底部：实心30px黑色；
右边框：实心30px透明；
左边框：实心30px透明；
}

CSS边框版本：

.triangle {
    position: relative;
    width:0;
    border-bottom:solid 50px black;
    border-right:solid 30px transparent;
    border-left:solid 30px transparent;
}
.triangle .empty {
    position: absolute;
    top:9px;
    left:-21px;
    width:0;
    border-bottom:solid 36px white;
    border-right:solid 21px transparent;
    border-left:solid 21px transparent;
}

在黑色三角形中添加白色三角形：

CSS边框版本：

.triangle {
    position: relative;
    width:0;
    border-bottom:solid 50px black;
    border-right:solid 30px transparent;
    border-left:solid 30px transparent;
}
.triangle .empty {
    position: absolute;
    top:9px;
    left:-21px;
    width:0;
    border-bottom:solid 36px white;
    border-right:solid 21px transparent;
    border-left:solid 21px transparent;
}

在黑色三角形中添加白色三角形：

考虑使用该元素。我在上面画了一个简单的三角形，还没什么特别的

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
上下文。moveTo（10,0）；
上下文。lineTo（20,20）；
lineTo（0,20）；
closePath（）；
context.fill（）
考虑使用该元素。我在上面画了一个简单的三角形，还没什么特别的


var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
context.beginPath（）；
上下文。moveTo（10,0）；
上下文。lineTo（20,20）；
lineTo（0,20）；
closePath（）；
context.fill（）
我找到了一个仅的解决方案，使用▲ 人物：


.triangle{
-webkit文本笔划：12px黑色；
颜色：透明；
字体大小：200px；
}
和#9650我使用▲ 人物：


.triangle{
-webkit文本笔划：12px黑色；
颜色：透明；
字体大小：200px；
}
和#9650您可以使用我在这里描述的方法：使用旋转的伪元素。然后，可以向旋转的伪元素添加边框，以创建所需的效果

您还可以使用此技术在图像、渐变或任何非平面背景上显示带边框的三角形：



.tr{
宽度：40%；
填充底部：28.28%；/*=宽度/平方米（2）*/
位置：相对位置；
边框底部：6px实心rgba（0,0,0,0.8）；
右边框：6px实心透明；
左边框：6px实心透明；
溢出：隐藏；
}
tr：之前{
内容：''；
位置：绝对位置；
底部：0；左侧：0；
宽度：100%；高度：100%；
边框顶部：6px实心rgba（0,0,0,0.8）；
左边框：6px实心rgba（0,0,0,0.8）；
-moz框大小：边框框；
框大小：边框框；
-webkit转换来源：0 100%；
-ms变换原点：0.100%；
变换原点：0.100%；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}
/*下面是演示*/
正文{背景：url（'https://picsum.photos/id/100/1000/1000）；背景尺寸：封面；}
您可以使用我在这里描述的方法：使用旋转的伪元素。然后，可以向旋转的伪元素添加边框，以创建所需的效果

您还可以使用此技术在图像、渐变或任何非平面背景上显示带边框的三角形：



.tr{
宽度：40%；
填充底部：28.28%；/*=宽度/平方米（2）*/
位置：相对位置；
边框底部：6px实心rgba（0,0,0,0.8）；
右边框：6px实心透明；
左边框：6px实心透明；
溢出：隐藏；
}
tr：之前{
内容：''；
位置：绝对位置；
底部：0；左侧：0；
宽度：100%；高度：100%；
边框顶部：6px实心rgba（0,0,0,0.8）；
左边框：6px实心rgba（0,0,0,0.8）；
-moz框大小：边框框；
框大小：边框框；
-webkit转换来源：0 100%；
-ms变换原点：0.100%；
变换原点：0.100%；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
}
/*下面是演示*/
正文{背景：url（'https://picsum.photos/id/100/1000/1000）；背景尺寸：封面；}
我找到了一个不错的解决方案，有点棘手，但对我来说，这是最简单的方法：

}
我找到了一个不错的解决方案，有点棘手，但对我来说这是最简单的方法：

}
这里有一个使用多重背景和
线性梯度的想法：


.triangle{
宽度：100px；
高度：100px；
背景：
/*左侧*/
线性渐变（到左下角，
透明49.5%，#000 50%钙（50%+10px），
透明计算（50%+11px））右/50%100%，
/*右侧*/
线性渐变（至右下角，
透明49.5%，#000 50%钙（50%+10px），
透明钙（50%+11px））左/50%100%，
/*底部*/
线性梯度（#000，#000）底部/计算（100%-20px）10px；
背景重复：无重复；
}
以下是一个使用多重背景和
线性渐变的想法：


.triangle{
宽度：100px；
高度：100px；
背景：
/*左侧*/
线性渐变（到左下角，
透明49.5%，#000 50%钙（50%+10px），
透明计算（50%+11px））右/50%100%，
/*右侧*/
线性渐变（至右下角，
透明49.5%，#000 50%钙（50%+10px），
透明钙（50%+11px））左/50%100%，
/*底部*/
线性梯度（#000，#000）底部/计算（100%-20px）10px；
背景重复：无重复；
}
仅使用CSS？一