CSS - (Caret|Arrow)
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.
Articles Related
Example
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
Without width and height → arrow
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>
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>
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>
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>
Documentation / Reference
- Bootstrap class=“caret”