How to make arrow in CSS with angle?

Question

Now I have the following HTML code that builds arrow left:

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

I need to make arrow left with angel to up. How I can do it?

Answer 1

You can use CSS3's transform .

transform: rotate(45deg);

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

Answer 2

You can try something like this

DEMO

Preview

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