如何用角度在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;
}

我需要让天使留下箭头。我怎么能这样做？

Answer 1

您可以使用CSS3＆＃39; transform。

transform: rotate(45deg);

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

Answer 2

您可以尝试这样的事情

<强> DEMO

预览

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