1 - CSS - (Caret|Arrow)

2 - About

A carret/Arrow is made in CSS with the help of the border corner.

The following ingredients are needed:

  • a block box
  • with a height and width of null
  • and transparent border

The width of the border becomes the width of the caret.

4 - Example

4.1 - With width and weight -> box

With width and weight, you get a box where you can already seen in the corners the beginning of an arrow.

.coloredBox {
	width: 20px; 
	height: 20px; 
	border-left: 4px solid aqua;
	border-right: 4px solid red;
	border-bottom: 4px solid black;
	border-top: 4px solid blue;
        display:block;
}
  • The type of block is important. It must be block box
<p>A block box</p>
<span class="coloredBox"></span>
 
<p>A inline box will not respond to the width</p>
<span class="coloredBox" style="display:inline"></span>

The p element renders by default as a block box whereas the span element renders default as a inline box

Advertising

4.2 - Without width and height -> arrow

4.2.1 - Caret-up

.caret-up {
	width: 0; 
	height: 0; 
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid black;
        display:block;
}
<span class="caret-up"></span>

4.2.2 - Caret-down

.caret-down {
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid blue; 
        display:block;
}
<p class="caret-down"></p>

4.2.3 - Caret-right

.caret-right {
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 8px solid aqua;
        display:block;
}
<p class="caret-right"></p>

4.2.4 - Caret-left

.caret-left {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right: 10px solid red; 
        display:block;
}
<p class="caret-left"></p>

Advertising

5 - Documentation / Reference

web/css/arrow.txt · Last modified: 2019/02/09 11:40 by gerardnico