All geek questions in one place

How can I make a pointy arrow with div in CSS

How to create a noticeable arrow in CSS? Not only a triangle, but one with a stalk, like a traditional arrow to be released from a bow?

I am trying to do this by creating a div container containing two containers, left and right. The right will contain a triangle, and the left will contain three divs, the center of which will be colored to create the stem.

Here is my code:

HTML:

<div id="main"> <div class='arrowblock'> <div class='arrowright'></div> <div class='rectcontainer'> <div class='rect'></div> <div class='rect' style='background-color:green'> </div><div class='rect'> </div> </div>

CSS

 .rectcontainer { height:30px; width:100px; } .arrowblock { width:130px; border-top: 15px solid transparent; } .arrowright { float:right; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 30px solid green; } .rect { width:100px; height:10px; background-color:transparent; }

Is there an easier way to achieve this?

+7
source share
5 answers

Here is the arrow with pure CSS . It is supported by all browsers. It took me less than a minute to do ..

enter image description here

jsFiddle

 .arrow { width: 120px; } .line { margin-top: 14px; width: 90px; background: blue; height: 10px; float: left; } .point { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 30px solid blue; float: right; } 
 <div class="arrow"> <div class="line"></div> <div class="point"></div> </div>

+27
source

I created this, which you can use for the arrow pointing to the right.

There are two variables in the script: widthofarrow and colorofarrow. By changing them, you can create an arrow of any size or color.

http://jsfiddle.net/FKekh/3/

HTML:

 <!DOCTYPE html> <div id="main"></div>

CSS

 .rectcontainer { height:30px; } .arrowblock { } .arrowright { float:right; } .rect { width:100px; height:10px; background-color:transparent; }

JAVASCRIPT:

 widthofarrow=130; colorofarrow="#345678"; $("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>"); $('.arrowblock').css('width', widthofarrow + 'px'); $('.rectcontainer').css('width', (widthofarrow - (30)) + 'px'); $('.arrowright').css('border-top', (15) + 'px solid transparent'); $('.arrowright').css('border-bottom', (15) + 'px solid transparent'); $('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);

EDIT

I updated the excellent JoshC code so that it can be used to create arrows of different sizes and colors.

http://jsfiddle.net/fqcFp/2/

+3
source

How to simply use the html character or Unicode character for your arrow:

 <div>&#8594;</div> <div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div> div{ font-size: 40px; }

Fiddle

Here you can choose here

+2
source

Taking Josh a bit later, I made an example that adjusts the width based on the container, keeping it pure CSS. Thanks @Josh for the starting point! I support several older browsers, so this is good for me. We could use transform to rotate the arrow as we like in more modern browsers. NTN

  <div class="RightArrow"> <div class="line"></div> <div class="point"></div> </div> <!-- for very short arrows reduce the width of .line --> <style> /* style tag added so SO will syntax color please use *.css irl*/ .RightArrow { width:90%; position: relative; } .line { margin-top:8px; width:97%; background:blue; height:0.3em; float:left; position: absolute; } .point { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 37px solid blue; float:right; } </style>
0
source

To build the answer on @ josh-crozier, you can eliminate a lot of HTML using pseudo elements instead:

jsFiddle

HTML:

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

CSS

 .arrow { position:relative; width:120px; margin:50px auto; height:0; border-bottom:10px solid blue; } .arrow::after { content: ''; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 30px solid blue; position: absolute; right: -10px; top: -15px; }

To add an arrow at the beginning of a line using the :: before element is also trivial: jsFiddle

0
source

Source: https://habr.com/ru/post/1502300/

More articles:


All Articles