Как сверстать такой блок с треугольником?

Question

[Qurel]

Как сверстать такой блок с треугольником?

Answer 1

[Максим]

А пробовали уже что не будь - как нибудь реализовать ?
Вот примерно что можно получить на SVG: codepen.io

Comments

[Qurel]

На уме пока два варианта: треугольник через псвевдоэлемент или трансформация.
Там сложность, после треугольника скошенная линия

[Максим]

Qurel, смотри - я показал как делать на svg

[Ярослав Иванов]

Qurel, clip-path

[Максим]

Ярослав Иванов, что клип пат ?

[Ярослав Иванов]

Максим Ленский, я вам отвечал?

[Максим]

Ярослав Иванов, отвечают в ответе ...это комментарий

[Ярослав Иванов]

Максим Ленский, ты странный. Сходи к врачу)

[Qurel]

Xорошее решение, не совсем то, после треугольника идет наклонная линия:

[Максим]

Qurel, где полоса ..?
вот так : https://codepen.io/topicstarter/pen/NeyoeY?

[Ярослав Иванов]

Максим Ленский, у меня скидка на docdoc тебя записать?

[Максим]

Ярослав Иванов, я не знаю что это такое ?

[Ярослав Иванов]

Максим Ленский, геометричемкая фигура

[Максим]

Ярослав Иванов, не надо мне завивать голову тем что не будет работать в IE=>9 версии

[Ярослав Иванов]

Максим Ленский, Зачем исползовать этот шлак ?

[Ярослав Иванов]

Максим Ленский, тем более он там эмулируется)

[Максим]

Ярослав Иванов, я больше svg люблю ... не надо лишнего мне

[Qurel]

Xочу использовать это решение, понравилось, что адаптируется под разные расширения экрана, но не понимаю как настроить. Подставляю свою картинку, она у меня разрешением 1040x553. Она растягивается, меняю ширину и высоту - не то.

[Максим]

Qurel, но всё же вы вопрос задавали как сделать ...а что бы поддерживать или менять что то надо под учить SVG и всё
если вам это охота освоить но не знаете с чего начать пишите мне на почту [e-mail] я через teamviewer покажу расскажу

Answer 2

[Qurel]

Я реализовала эту фигуру таким способом:

.banner-img
   img(src="static/img/content/main/slide1.jpg", alt="Banner")

&-img
    position relative
    margin-bottom 20px
    img
      width 100%
    &::after
      content ''
      position absolute
      right 0
      bottom -1px
      width 45%
      height 13%
      background url('../img/content/main/triangle.png') no-repeat
      background-size 100%

Так как размеры указаны в процентаx, фигура адаптивно изменяла размеры при уменьшении экрана