CSS3-полигоны с изображениями, как?

Как я могу сделать эти фигуры с изображением внутри каждого блока? Каждый блок будет иметь 100% ширину. Взгляните на пример:

https://imgur.com/FIJ2qcg

У меня есть многоугольник, но как я могу сделать его 100% svg и с полным фоном изображения без потери соотношения сторон?

`https://jsfiddle.net/acrr120/t9y950qy/`

вам нужно понимать позиции точек (x, y) в пользовательском интерфейсе, чтобы создавать собственные формы, см. w3schools.com/graphics/svg_polygon.asp для быстрой справки

— 21.05.2018 21:53

Я сделал многоугольник, но как его заполнить? А с изображением 100% без потери порций?

— 23.05.2018 16:46

css svg polygon shape polygons

21.05.2018 18:55

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Просто оберните свой svg в контейнер и дайте height, который вы хотите, и дайте также overflow:hidden, таким образом вы определите высота, которое хотите, и соблюдая соотношение для svg

.container {
  height: 500px;
  overflow: hidden;
}

<div class = "container">
    <svg width = "100%" viewBox = "0 0 100 100" style = "border:1px solid red">
      <polygon points = "0,0 30,10 100,10 100,100 0,100" fill = "red" />
    </svg>
</div>

А как сделать с полноэкранным фоном без потери соотношения сторон?

— 24.05.2018 17:37

23.05.2018 17:10