想用CSS创建箭头

Question

今天我用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度后没有移动。

Answer 1

您可以通过

执行此操作

1. 创建箭头

2. 通过转换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;
}

<div class="arrow-right"></div>

Answer 2

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

使用svg创建路径并不难。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 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