Как сделать прозрачный указатель?

Question

[Дмитрий Софронов]

Как сделать прозрачный указатель? Точнее нижний треугольник, если бы он был цветной проблем бы не было, а тут проблемка(

Comments

[RTW]

Указатель в смысле этот tooltip на картинке?

[Ivan Stroykin]

RTW: Мне кажется речь про нижний треугольник

[Дмитрий Софронов]

Иван Стройкин: да, про него

Answer 1

[Ankhena]

Вот так https://jsfiddle.net/rye4qjpk/

Это на скорую руку, но суть такая.
Дальше надо пересчитать все в calc, если нужна адаптивность.

div {
  position: relative;
  width: 100px;
  height: 50px;
  border-width: 3px 3px 0 3px;
  border-color: #f00 #f00 transparent #f00;
  border-style: solid;
  background: linear-gradient(to right, #f00 0, #f00 40px, transparent 41px, transparent 59px, #f00 60px, #f00 100%) no-repeat bottom center / 100% 3px;
}

div:after {
  content: "";
  position: absolute;
  display: block;
  bottom:-9px;
  left: 41px;
  width: 14px;
  height: 14px;
  transform: rotate(-45deg);
  border-bottom: 3px solid #f00;
  border-left: 3px solid #f00;
}

Answer 2

[Vitaliy Orlov]

используй css св-во background:transparent , вот пример: https://jsfiddle.net/orlov0562/ewLtupr1/