CODEWITHSUNDEEP
htmlcss
Ahmed
Ahmed

Reputation: 255

How to make arrow in CSS with angle?

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?

Upvotes: 4

Views: 4818

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122105

You can try something like this

DEMO

Preview enter image description here

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

Upvotes: 2

Rob Erskine
Rob Erskine

Reputation: 927

You can use CSS3's transform.

transform: rotate(45deg);

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

Upvotes: 4

Related Questions