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

【问题标题】：How to create a transparent triangle with border using CSS?如何使用 CSS 创建带边框的透明三角形？
【发布时间】：2013-04-20 07:37:26
【问题描述】：

如何使用 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;
    }

您可以在 Triangle 看到它的工作原理。这是有效的，但有一个边界技巧。有没有其他方法可以做到？

使用 SVG 矢量可以轻松完成，但我不想走那么长的路。

【问题讨论】：

只有 CSS 吗？还有透明的机身？
apps.eky.hk/css-triangle-generator
hedgerwow.appspot.com/demo/arrows
jonrohan.me/guide/css/creating-triangles-in-css
说真的，SVG 是这里最合适的解决方案。是的，你可以用 CSS 实现一些非常聪明的事情，但是 SVG 是为绘制任意形状而设计的； CSS 不是。具有讽刺意味的是，您之所以低估 SVG，是因为您认为它很难，但实际上并非如此。老实说，这很容易。如果您要绘制复杂的形状，肯定 SVG 会变得复杂，但基本的三角形并不复杂；绘制三角形所需的 SVG 代码比 CSS 少，而且代码也更容易理解。

标签： html css css-shapes

【解决方案1】：

尝试使用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>

这里是tutorial

【讨论】：

@Bigood 没有提到这个问题。我的回答比他的评论还早
+1 因为 SVG 是一个更合适的解决方案，即使它不是 OP 实际要求的。再加上 OP 显然对 SVG 有误解——这里给出的答案很难用“冗长”来形容。

【解决方案2】：

    .triangle{
        width:0;
        border-bottom:solid 30px black;
        border-right:solid 30px transparent;
        border-left:solid 30px transparent;
    }

    <div class="triangle">
    </div>

这将是一个指向顶部的三角形。不要将边框指定到需要指向的一侧。

上面是一个等边三角形。删除border-left 使其成为直角三角形。

【讨论】：

有问题的三角形是空心的，这是实心的

【解决方案3】：

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;
}

在黑色三角形内添加一个白色三角形：http://jsfiddle.net/samliew/Hcfsx/

【讨论】：

【解决方案4】：

考虑使用<canvas> 元素。我在 jsfiddle 上构建了一个简单的三角形 - 还没有什么花哨的。

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(10, 0);
    context.lineTo(20, 20);
    context.lineTo(0, 20);
    context.closePath();
    context.fill();

&lt;canvas id="myCanvas" width="20" height="20"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案5】：

我找到了一个 webkit-only 解决方案，使用 ▲ 字符：

.triangle {
  -webkit-text-stroke: 12px black;
  color: transparent;
  font-size: 200px;
}

&lt;div class="triangle"&gt;&amp;#9650;&lt;/div&gt;

附加：

CanIUse reference for text-stroke - 截至 2019 年涵盖的所有主要浏览器
CSS-tricks文章
Useful HTML shapes

【讨论】：

@Bigood：这是我在这个问题中得到的最好的解决方案，很棘手；）
@Manoz 即使是 samuel 也很好，他得到了我的支持，因为这将是跨浏览器，而这不是，但这真的很酷
@softvar 当然可以，但我不会在这里发布。请提出一个新问题，我会尽快回答。

【解决方案6】：

您可以使用我在此处描述的方法：How does this CSS triangle shape work? 与旋转的伪元素。然后，您可以为旋转的伪元素添加边框以创建您正在寻找的效果。

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

DEMO

.tr{
  width:40%;
  padding-bottom: 28.28%; /* = width / sqrt(2) */
  position:relative;
  border-bottom: 6px solid rgba(0,0,0,0.8);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  overflow:hidden;
}
.tr:before{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:100%; height:100%;
  border-top:6px solid rgba(0,0,0,0.8);
  border-left:6px solid rgba(0,0,0,0.8);
  
  -moz-box-sizing:border-box;
  box-sizing:border-box;
    
  -webkit-transform-origin:0 100%;
  -ms-transform-origin:0 100%;
  transform-origin:0 100%;
    
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* FOLLOWING JUST FOR THE DEMO */
body{background:url('https://picsum.photos/id/100/1000/1000');background-size:cover;}

&lt;div class="tr"&gt;&lt;/div&gt;

【讨论】：

【解决方案7】：

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

.triangle {
position: absolute;
margin: auto;
top: -70px;
left: 0;
right: 0;
width: 137px;
height: 137px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 4px solid #e74c3c;
border-bottom: 4px solid #e74c3c;

}

【讨论】：

【解决方案8】：

这是一个使用多个背景和linear-gradient的想法：

.triangle {
  width:100px;
  height:100px;
  
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,#000 50% calc(50% + 10px),
      transparent calc(50% + 11px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,#000 50% calc(50% + 10px),
      transparent calc(50% + 11px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(#000,#000) bottom/calc(100% - 20px) 10px;
  background-repeat:no-repeat;
}

&lt;div class="triangle"&gt;&lt;/div&gt;

您可以考虑使用 CSS 变量来轻松调整形状：

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(var(--c),var(--c)) bottom/calc(100% - 2*var(--t)) var(--t);
  background-repeat:no-repeat;
}

body {
 background:pink;
}

<div class="triangle"></div>

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;height:150px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

梯度较小的不同语法：

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  border:var(--t) solid transparent;
  border-bottom-color:var(--c);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left;
  background-size:50% 100%;
  background-origin:border-box;
  background-repeat:no-repeat;
}

body {
 background:pink;
}

<div class="triangle"></div>

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;height:150px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

你可以考虑用同样的想法来创建一个矩形三角形：

.triangle {
  --t:10;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  height:100px;
  display:inline-block;
  border:calc(var(--t)*1px) solid transparent;
  border-image:
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50%) var(--t);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)*1px),
      transparent calc(50% + var(--t)*1px + 1px));
  background-origin:border-box;
  background-repeat:no-repeat;
}

body {
 background:pink;
}

<div class="triangle"></div>

<div class="triangle" style="--t:5;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8;--c:red;height:150px"></div>

<div class="triangle" style="--t:15;--c:green;width:80px"></div>

如果您想要一个等边三角形，只需使用初始代码保持宽度/高度之间的比率

.triangle {
  --t:10px;  /* Thickness */
  --c:black; /* Color */

  width:100px;
  display:inline-block;
  border:var(--t) solid transparent;
  border-bottom-color:var(--c);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) right,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
      transparent calc(50% + var(--t) + 1px)) left;
  background-size:50% 100%;
  background-origin:border-box;
  background-repeat:no-repeat;
}

.triangle:before {
  content:"";
  display:block;
  padding-top:86.6%;
}

body {
 background:pink;
}

<div class="triangle"></div>

<div class="triangle" style="--t:5px;--c:blue;width:150px"></div>

<div class="triangle" style="--t:8px;--c:red;width:50px"></div>

<div class="triangle" style="--t:15px;--c:green;width:80px"></div>

有关计算的更多详细信息的相关答案：How do CSS triangles work?

【讨论】：

【解决方案9】：

clip-path也可以考虑：

html {
  /* init size and shape to the triangle*/
  --base: 155px;
  --ratio: 1;
  /* try too 0.71*/
  ;
}

[data-triangle] {
  width: var(--base);
  height: calc(var(--base) * var(--ratio));
  clip-path: polygon( 0 100%, 50% 0, 100% 100%, 94% 96%, 50% 8%, 6% 96%, 96% 96%, 100% 100%);
  background: gray;
}


/* demo makup */

html {
  display: grid;
  min-height: 100vh;
}

body {
  background: repeating-linear-gradient(45deg, silver 0, #444, gold, blue, lime, tomato, purple, gray 5em) 0 0 / 100% 100%;
  margin: auto;
  text-align: center;
  box-shadow: inset 0 0 0 100vw rgba(0, 0, 0, 0.5), 0 0 0 100vw rgba(0, 0, 0, 0.5);
  color:gray
}

[data-triangle] {
  transition: 1s;
}

body:hover [data-triangle]{
  background: black;
}

body:hover {
  filter: drop-shadow(0 0 1px gold)drop-shadow(0 0 1px white)drop-shadow(0 0 1px white)drop-shadow(0 0 1px white)drop-shadow(0 0 1px white)drop-shadow(0 0 10px white);
  /*make that triangle obvious over that funny gradient*/
  color: transparent;
  box-shadow: 0 0;
}


}

<div data-triangle></div>
hover to highlight

为了帮助您创建clip-path，您可以使用此在线工具https://bennettfeely.com/clippy/

【讨论】：