如何使用 CSS 创建向下箭头？答案

【问题标题】：How to create a down arrow using CSS?如何使用 CSS 创建向下箭头？
【发布时间】：2019-05-22 17:37:23
【问题描述】：

我尝试做一个内部透明颜色和彩色边框的箭头，但我是这个世界的新手。有人可以帮我做这样的事情： arrow down with text inside

我的代码：

.pentagon {
    position: relative;
    width: 350px;
    top:20rem;
    left: 20rem;
    border-width: 80px 0 100px 0;
    border-style: solid;
    border-color: #01ff70 transparent;
}
.pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    left: -7.5rem;
    border-width: 100px 300px 300px;
    border-style: solid;
    border-color: transparent transparent #01ff70;
    transform: rotate(180deg);
}

【问题讨论】：

您似乎希望我们为您编写一些代码。虽然许多用户愿意为陷入困境的程序员编写代码，但他们通常只在发布者已经尝试自己解决问题时才提供帮助。展示这项工作的一个好方法是包含您迄今为止编写的代码、示例输入（如果有的话）、预期输出以及您实际获得的输出（控制台输出、回溯等）。您提供的详细信息越多，您可能收到的答案就越多。检查FAQ 和How to Ask。
搜索和学习教程是如何工作的。这是一个例子css-tricks.com/snippets/css/css-triangle
好吧好吧对不起，我已经做了一些代码，但我认为没有必要写

标签： css css-shapes

【解决方案1】：

我会用多个渐变来创建每一行：

.arrow {
  width:200px;
  height:200px;
  background:

    linear-gradient(blue,blue)  top center/ 100px 3px,
    
    linear-gradient(blue,blue)  calc(50% - 50px) 0/3px 50%,
    linear-gradient(blue,blue)  calc(50% + 50px) 0/3px 50%,
    
    linear-gradient(blue,blue)  0 50%/51px 3px,
    linear-gradient(blue,blue)  100% 50%/51px 3px,
    
    linear-gradient(to bottom right,
      transparent calc(50% - 2px),blue calc(50% - 2px),
      calc(50% + 2px),transparent calc(50% + 2px)) 100% 100%/50% 50%,
    linear-gradient(to bottom left,
      transparent calc(50% - 2px),blue calc(50% - 2px),
      calc(50% + 2px),transparent calc(50% + 2px)) 0 100%/50% 50%;
    
  background-repeat:no-repeat;
  text-align:center;
  line-height:220px;
}

<div class="arrow">
  text inside
</div>

并用一些 CSS 变量来控制不同的值：

.arrow {
  --c:blue; /*main color*/
  --t:2px; /*thickness*/
  --d: 100px; /*top length*/
  --p:50%; /*percentage of top*/
  
  --g:linear-gradient(var(--c),var(--c));
  width:200px;
  height:200px;
  background:
    /*1*/
    var(--g) top center/ var(--d) var(--t),
    /*2*/
    var(--g)  calc(50% - var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
    var(--g)  calc(50% + var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
    /*3*/
    var(--g)  left  0 top var(--p)/calc(50% - var(--d)/2) var(--t),
    var(--g)  right 0 top var(--p)/calc(50% - var(--d)/2) var(--t),
    /*4*/
    linear-gradient(to bottom right,
      transparent calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
      calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 100% 100%/50% calc(100% - var(--p)),
    linear-gradient(to bottom left,
      transparent calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
      calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 0 100%/50% calc(100% - var(--p));
    
  background-repeat:no-repeat;
  display:inline-block;  
  text-align:center;
  line-height:220px;
}

<div class="arrow">
  text inside 
</div>
<div class="arrow" style="--c:red;--t:5px;--d:40px;--p:40%">
 text inside
</div>
<div class="arrow" style="--c:green;--t:3px;--d:70px;--p:60%">
 text inside
</div>

位于top center 处的一条线，宽度等于--d，高度等于--t
两条垂直线的宽度等于--t，高度等于--p + 一半的厚度，以使它们与底部正确链接。我们将第一行放在顶部0 并从中心删除一半--d，因此它从顶部行的左侧开始。与右边的另一行相同的逻辑。
两条水平线，宽度等于顶线(100% - var(--d))/2 左侧宽度的一半，高度等于--t。它们的位置很容易找到。左边的0 和顶部的--p。正确的逻辑相同。
两条对角线是两个渐变，占宽度的一半和100% - var(--p)。在这里，我们使用着色来仅对对角部分着色，并保持其余部分透明。

如果您想要更多，我们可以在箭头内添加颜色：

.arrow {
  --c:blue; /*main color*/
  --b:red; /*background color*/
  --t:2px; /*thickness*/
  --d: 100px; /*top length*/
  --p:50%; /*percentage of top*/
  
  --g:linear-gradient(var(--c),var(--c));
  width:200px;
  height:200px;
  background:
    /*1*/
    var(--g) top center/ var(--d) var(--t),
    /*2*/
    var(--g)  calc(50% - var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
    var(--g)  calc(50% + var(--d)/2) 0/var(--t) calc(var(--p) + var(--t)/2),
    /*3*/
    var(--g)  left  0 top var(--p)/calc(50% - var(--d)/2) var(--t),
    var(--g)  right 0 top var(--p)/calc(50% - var(--d)/2) var(--t),
    /*4*/
    linear-gradient(to bottom right,
      var(--b) calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
      calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 100% 100%/50% calc(100% - var(--p)),
    linear-gradient(to bottom left,
      var(--b) calc(50% - var(--t)/2 - 1px),var(--c) calc(50% - var(--t)/2),
      calc(50% + var(--t)/2),transparent calc(50% + var(--t)/2 + 0.5px)) 0 100%/50% calc(100% - var(--p)),
     /*5*/
     linear-gradient(var(--b),var(--b)) center top/var(--d) var(--p);
  background-repeat:no-repeat;
  display:inline-block;  
  text-align:center;
  line-height:220px;
}

<div class="arrow">
  text inside
</div>
<div class="arrow" style="--c:red;--b:yellow;--t:5px;--d:40px;--p:40%">
  text inside
</div>
<div class="arrow" style="--c:green;--b:pink;--t:3px;--d:70px;--p:60%">
  text inside
</div>

【讨论】：

【解决方案2】：

您可以在 div 上使用 css clip-path。

.arrow { 
    -webkit-clip-path: polygon(0 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    clip-path: polygon(0 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

https://bennettfeely.com/clippy/ 上有一个方便的工具

【讨论】：

只是想提一下，这在 IE、Edge 和 Safari 中不起作用
我已经看过这个网站，但我不太喜欢这种方式
我强烈反对！这是我能在短时间内做的最好的事情。 codepen.io/anon/pen/bzZXya
确实，clip-path 的支持很差。在不同的浏览器上有不同的设计并不是一个坏习惯。无论如何，都有特定的媒体查询。
它与我的代码相同，但我无法使箭头在内部带有边框颜色的透明