Адаптивная ленточка (ribbon)?

Question

[Alibek Kulseitov]

Как сделать ленточку адаптивной по высоте?
Я нашел решение, их полно в интернете но чтобы оно было адаптивной, нету. Может есть тут кто знает решение?

Comments

[Rustam Bainazarov]

Присмотритесь к ответу saintluka для этого вопроса:
Как сверстать прямоугольник со «стрелкой» на конце?

[Андрей]

вы хотите угол сохранять или разворачивать?

Answer 1

[HamSter]

Как вариант использоватьclip-path:

.ribbon {
  ...
  background: #36499A;
  -webkit-clip-path: polygon(0% 0%, 100% 0, 75% 50%, 100% 100%, 0 100%, 25% 50%);
   clip-path: polygon(0% 0%, 100% 0, 75% 50%, 100% 100%, 0 100%, 25% 50%);
}

JSBIN

caniuse.com clip-path

ИЛИ Вариант 2 использовать svg в качестве фона.

<div class="ribbon">
  <div class="bg">
    <svg viewBox="0 0 400 200" preserveAspectRatio="none">
      <path fill="#36499A" d="M 0,0 400,0 350,100 400,200 0,200 50,100 z"></path>
    </svg>
  </div>
  <div class="inner">
    Lorem ipsum dolor sit amet.
  </div>
</div>

фон на absolute:

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

svg {
  width: 100%;
  height: 100%;
}

Полный код на jsbin

Comments

[Максим]

что там мой кровопийца Паша на SO кровь пьёт ??

[Alibek Kulseitov]

Решение классное но позже обнаружил не поддержку в IE =(

[HamSter]

Alibek Kulseitov, это да, извините не упомянула что у clip-path поддержка не очень

[HamSter]

Максим Ленский, какой именно?)))) Там кровопийц полно!)

[Максим]

HamSter, Варшавский - крышу двигает ??я читаю ленту на SO и балдею

[HamSter]

Alibek Kulseitov, Добавила второй вариант с svg .
Форма ленты от руки нарисована, по svg path, поэтому если что можно подправить координаты.

Answer 2

[RAX7]

Answer 3

[freizis]

А что если просто задать ей изменение высоты media запросами, я считаю это вполне адекватный вариант.

Comments

[Alibek Kulseitov]

причем тут медиазапросы?) если текст будет в 3 строки а у некоторых в 2, плюс там не высотой контролируется высотаа бордерами