A good-looking CSS-only chip

Hello everyone! Today, we'll be making this chip:

Inbox (3)

The html structure is quite minimal, a single container:

<div class="chip">Inbox (3)</div>

The css uses transparent borders of before and after pseudo-elements, as well as border radiuses, to achieve the desired visual effect.

Currently the height of the chip is hardcoded at 32px. Next step would be to make this size-adjustable, by means of em's or CSS variables.

.chip {
    display: inline;
    border-radius: 1em 0 0 1em;
    margin-right: 32px;
    padding: 0.2em 0.2em 0.2em 0.6em;
    height: 32px;
    background: white;
    position: relative;
}
.chip::before {
  content: "";
  display: block;
  position: absolute;
  right: -16px;
  top: 0;
  width: 16px;
  height: 32px;
  border-top: 17px solid white;
  border-right: 12px solid transparent;
}
.chip::after {
  content: "";
  display: block;
  position: absolute;
  right: -16px;
  bottom: 0;
  width: 16px;
  height: 32px;
  border-bottom: 17px solid white;
  border-right: 12px solid transparent;
}

Please log in to post a comment:

A good-looking CSS-only chip

Related Articles