Example CSS Caret Arrow Triangle

Example CSS Caret Arrow Triangle

by Adi Jaya

HTML

<main>

    <section>
        <h2>Default</h2>
        <p>
          Top : <span class="caret caret-top"></span>
        </p>
        
        <p>
          Bottom : <span class="caret caret-bottom"></span>
        </p>
        
        <p>
          Left : <span class="caret caret-left"></span>
        </p>
        
        <p>
          Right : <span class="caret caret-right"></span>
        </p>
    </section>
    
    
    <section>
    <h2>Colors</h2>
    <p>
      <span class="caret caret-top text-primary"></span>
      <span class="caret caret-bottom text-danger"></span>
      <span class="caret caret-left text-success"></span>
      <span class="caret caret-right text-warning"></span>
    </p>
    </section>
    
    
    <section>
    <h2>Medium</h2>
    <p>
      <span class="caret caret-top caret-md"></span>
      <span class="caret caret-bottom caret-md"></span>
      <span class="caret caret-left caret-md"></span>
      <span class="caret caret-right caret-md"></span>
    </p>
    </section>
    
    
    <section>
    <h2>Large</h2>
    <p>
      <span class="caret caret-top caret-lg"></span>
      <span class="caret caret-bottom caret-lg"></span>
      <span class="text-danger caret caret-left caret-lg"></span>
      <span class="caret caret-right caret-lg"></span>
    </p>
    </section>
    
</main>

CSS

body {
    font-size: 1em;
    font-family: sans-serif;
    margin: 0;
    background: #525252;
}

main {
    background: #fff;
    margin: 0 auto;
    max-width: 600px;
    padding: 15px;
}

section {
    padding: 15px;
    margin-bottom: 1em;
    border: 1px solid silver;
    border-radius: 4px;
}

section h2, section p {
    margin-top: 0;
    font-weight: 400;
}

.text-primary {
    color: #0445a9;
}

.text-danger {
    color: #ce0a51;
}

.text-success {
    color: #018400;
}

.text-warning {
    color: #c19900;
}


.caret {
	position: relative;
	display: inline-block;
	zoom: 1;
	width: 0;
	height: 0;
	background: 0 0;
	vertical-align: middle;
}

.caret-top {
	border-bottom: 8px solid currentColor;
}

.caret-bottom {
	border-top: 8px solid currentColor;
}

.caret-bottom, .caret-top {
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}

.caret-left,
.caret-right {
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.caret-left {
	border-right: 8px solid currentColor;
}

.caret-bottom.caret-md,
.caret-left.caret-md,
.caret-top.caret-md {
	border-right-width: 12px;
}

.caret-right {
	border-left: 8px solid currentColor;
}

.caret-bottom.caret-md,
.caret-right.caret-md,
.caret-top.caret-md {
	border-left-width: 12px;
}

.caret-left.caret-md,
.caret-right.caret-md {
	border-top-width: 12px;
	border-bottom-width: 12px;
}

.caret-top.caret-md {
	border-bottom-width: 12px;
}

.caret-bottom.caret-md {
	border-top-width: 12px;
}

.caret-bottom.caret-lg,
.caret-left.caret-lg,
.caret-top.caret-lg {
	border-right-width: 18px;
}

.caret-bottom.caret-lg,
.caret-right.caret-lg,
.caret-top.caret-lg {
	border-left-width: 18px;
}

.caret-left.caret-lg,
.caret-right.caret-lg {
	border-top-width: 18px;
	border-bottom-width: 18px;
}

.caret-top.caret-lg {
	border-bottom-width: 18px;
}

.caret-bottom.caret-lg {
	border-top-width: 18px;
}