CSS3 Arrows

by bighostkim

HTML

<title> CSS arrows</title>
<style>
.left-arrow {
    border-color: transparent black;
    border-style: solid;
    border-width: 20px 20px 20px 0px;
    height: 0px;
    width: 0px;
}

.right-arrow {
    border-color: transparent black;
    border-style: solid;
    border-width: 20px 0px 20px 20px;
    height: 0px;
    width: 0px;
}

.down-arrow {
    border-color: black transparent;
    border-style: solid;
    border-width: 20px 20px 0px 20px;
    height: 0px;
    width: 0px;
}

.up-arrow {
    border-color: black transparent;
    border-style: solid;
    border-width: 0px 20px 20px 20px;
    height: 0px;
    width: 0px;
}
</style>

<div class="left-arrow" style="border-color: transparent blue"></div> Foo
<div class="right-arrow"></div>
<div class="down-arrow"></div>
<div class="up-arrow"></div>

CSS

div {display: inline-block}