Triangle buttons

<!-- Up triangle button -->
<button class="container">
<!-- Triangle -->
<div class="container__triangle container__triangle--up"></div>
<!-- Content -->
...
</button>
<!-- Right triangle button -->
<button class="container">
<!-- Content -->
...
<!-- Triangle -->
<div class="container__triangle container__triangle--right"></div>
</button>
<!-- Down triangle button -->
<button class="container">
<!-- Triangle -->
<div class="container__triangle container__triangle--down"></div>
<!-- Content -->
...
</button>
<!-- Left triangle button -->
<button class="container">
<!-- Triangle -->
<div class="container__triangle container__triangle--left"></div>
<!-- Content -->
...
</button>
.container {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Spacing */
padding: 8px;
}
.container__triangle {
border-style: solid;
/* Size */
height: 0px;
width: 0px;
}
.container__triangle--up {
border-color: transparent transparent rgba(0, 0, 0, 0.3);
border-width: 0px 8px 8px;
}
.container__triangle--right {
border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
border-width: 8px 0px 8px 8px;
}
.container__triangle--down {
border-color: rgba(0, 0, 0, 0.3) transparent transparent;
border-width: 8px 8px 0px;
}
.container__triangle--left {
border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
border-width: 8px 8px 8px 0px;
}

See also

Arrow buttons

99.9$

Price tag

99

Voting