想用 CSS 创建箭头 [重复]答案

【问题标题】：Want to create arrow with CSS [duplicate]想用 CSS 创建箭头 [重复]
【发布时间】：2015-04-07 00:55:01
【问题描述】：

今天我正在用 css 创建箭头。我试过了

    .arrow-down {
        width: 0; 
        height: 0; 
        border-left: 400px solid transparent;
        border-right: -100px solid transparent;
        border-top: 300px solid #f00; 
    }
<div class="arrow-down"></div>

但每次我收到我为下一张图片做什么。我的问题完全不同，我正在创建三角形，其中三角形在 90 度后不移动。

【问题讨论】：

看看cssarrowplease.com

标签： css

【解决方案1】：

你可以这样做

创建箭头
通过变换css规则旋转箭头

.arrow-right {
  width: 0;
  height: 0;
  border-top: 120px solid transparent;
  border-bottom: 120px solid transparent;
  -ms-transform: rotate(-59deg); /* IE 9 */
  -webkit-transform: rotate(-59deg); /* Chrome, Safari, Opera */
  transform: rotate(-59deg);
  border-left: 69px solid green;
  margin-left: 170px;
}

&lt;div class="arrow-right"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

我认为创建该形状的更简单方法是使用 SVG。

用 svg 创建路径并不难。

只需将cordinats放在路径p=m 10 10 100 0 40 100 Z中，m开始路径，z关闭它。

.test {
  width: 250px;
  height: 250px;
  //border: 1px solid black;
}

<svg class="test" viewbox="0 0 150 150">
  <path d="m 10 10 100 0 40 100 Z" stroke="black"/>
</svg>

【讨论】：

如果不赞成请发表评论^_^

【解决方案3】：

或者用另一个“白色”的箭头覆盖你的箭头，像这样：

.arrow-down:before {
    content:' ';
    display:inline-block;
    position:absolute;
    top:-300px;
    right:0;
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-top: 300px solid white; 
}

FIDDLE

【讨论】：

我们在这里。有人对我的回答投了反对票，没有任何评论。