如何使用CSS制作带有角度的箭头？

Question

现在我有以下 HTML 代码来构建左箭头：

.item {  right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(70, 173, 255, 0);
    border-right-color: #AFCDEC;
    border-width: 30px;
    margin-top: -30px;
}

我需要制作一个从左侧指向上方的箭头，该怎么做呢？

- Ahmed

---

我能看到 HTML 吗？箭头是什么：图标、符号还是图片？ - Ismail Moghul

我不使用符号，我使用:after。 - Ahmed

Answer 1

你可以使用CSS3的transform。

transform: rotate(45deg);

http://codepen.io/RobErskine/pen/xZxKjV

- Rob Erskine

---

它可以旋转，但如何使箭头更长？ - Ahmed

只需使用 border-width: 50px 120px 50px 10px; 进行实验即可。@Ahmed - Vitorino fernandes

Answer 2

你可以尝试这样做：

您可以尝试以下方法

演示

预览

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

CSS

.arrow {
  height: 50px;
  position: relative;
  width: 10px;
  background: black;
  margin: 100px;
  display: inline-block;
}

.arrow:before {
  content: " ";
  width: 10px;
  background: black;
  height: 35px;
  position: absolute;
  top: -10px;
  transform: rotate(50deg);
  left: -10px;
}
.arrow:after {
  content: " ";
  width: 10px;
  background: black;
  height: 35px;
  position: absolute;
  top: -10px;
  transform: rotate(-50deg);
  right: -10px;
}

.left {
  transform: rotate(-90deg);
}

.right {
  transform: rotate(90deg);
}

.half-left {
  transform: rotate(-45deg);
}

.half-right {
  transform: rotate(45deg);
}

- Nenad Vracar