Тултип с треугольничком

by Ksenia Polyakova

HTML

<div class="tooltip">тултип</div>

CSS

div {
  position: relative;
  display: inline-block;
  padding: 20px;
  min-height: 30px;
  min-width: 100px;
  font-family: 'Trebuchet MS';
  margin-right: 30px;
  text-align: left;
  margin-left: 50px;
  color: white;
}

div:before {
  content: '';
  position: absolute;
}

.tooltip {
  background: olive;
  border-radius: 5px;
  color: #ccc;
}

.tooltip:before {
  left: -12px;
  width: 0px;
  height: 0px;
  border-right: 15px solid olive;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}