Форма со скошенной стороной (отзывчивая)


93

Я пытаюсь создать форму, как на изображении ниже, со скошенным краем только с одной стороны (например, с нижней стороны), в то время как другие края остаются прямыми.

CSS div со скошенной стороной

Я пробовал использовать метод границы (код приведен ниже), но размеры моей формы динамические, поэтому я не могу использовать этот метод.

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}
<div class="shape">
    Some content
</div>


Я также пробовал использовать градиенты для фона (как в приведенном ниже коде), но при изменении размеров все происходит неправильно. Вы можете понять, что я имею в виду, наведя курсор на фигуру в приведенном ниже фрагменте.

Как я могу создать эту форму со скошенной стороной, а также поддерживать динамические размеры ?

Ответы:


128

Есть много способов создать фигуру со скошенным краем только с одной стороны.

Следующие методы не могут поддерживать динамические размеры, как уже упоминалось в вопросе:

  • Метод граничного треугольника со значениями пикселей для border-width.
  • Линейные градиенты с синтаксисом угла (например, 45 градусов, 30 градусов и т. Д.).

Ниже описаны методы, которые могут поддерживать динамические размеры.


Метод 1 - SVG

( Совместимость с браузером )

SVG можно использовать для создания формы с помощью polygons или paths. В приведенном ниже фрагменте используется файл polygon. Любой необходимый текстовый контент можно разместить поверх фигуры.

Плюсы

  • SVG разработан для создания масштабируемой графики и может хорошо работать со всеми изменениями размеров.
  • Границы и эффект наведения могут быть достигнуты с минимальными затратами на кодирование.
  • Фигуре также можно придать изображение или градиентный фон.

Минусы

  • Поддержка браузера, вероятно, является единственным недостатком, потому что IE8- не поддерживает SVG, но это можно уменьшить, используя такие библиотеки, как Raphael, а также VML. Причем поддержка браузером ничем не хуже остальных вариантов.

Метод 2 - Градиентный фон

( Совместимость с браузером )

Линейные градиенты по-прежнему можно использовать для создания формы, но не с углами, как указано в вопросе. Мы должны использовать to [side] [side]синтаксис (спасибо vals ) вместо указания углов. Если указаны стороны, углы наклона автоматически регулируются в зависимости от размеров контейнера.

Плюсы

  • Форма может быть достигнута и сохранена, даже если размеры контейнера являются динамическими.
  • Эффект наведения можно добавить, изменив цвет градиента.

Минусы

  • Эффект наведения будет срабатывать, даже если курсор находится за пределами формы, но внутри контейнера.
  • Добавление границ потребует сложных манипуляций с градиентом.
  • Известно, что градиенты создают неровные углы при очень большой ширине (или высоте).
  • Фон изображения нельзя использовать на фигуре.

Метод 3 - Наклонные преобразования

( Совместимость с браузером )

В этом методе псевдоэлемент добавляется, наклоняется и позиционируется таким образом, что он выглядит так, как будто один из краев наклонен / наклонен. Если верхний или нижний край наклонен, наклон должен быть по оси Y, иначе вращение должно происходить по оси X. У них transform-originдолжна быть сторона, противоположная наклонной.

Плюсы

  • Формы можно добиться даже с помощью бордюров.
  • Эффект наведения будет ограничен фигурой.

Минусы

  • Размеры должны увеличиваться пропорционально, чтобы форма сохранялась, потому что, когда элемент наклонен, его смещение по оси Y увеличивается по мере widthувеличения и наоборот (попробуйте увеличить widthдо 200pxво фрагменте). Вы можете найти больше информации об этом здесь .

Метод 4 - Перспективные преобразования

( Совместимость с браузером )

В этом методе основной контейнер поворачивается по оси X или Y с небольшой перспективой. Установка соответствующего значения transform-originприведет к появлению скошенного края только с одной стороны.

Если верхняя или нижняя сторона наклонена, вращение должно происходить по оси Y, в противном случае вращение должно происходить по оси X. У них transform-originдолжна быть сторона, противоположная наклонной.

Плюсы

  • Формы можно достичь с помощью бордюров.
  • Размеры не должны увеличиваться пропорционально для сохранения формы.

Минусы

  • Контент также будет повернут, и, следовательно, его нужно повернуть в противоположную сторону, чтобы он выглядел нормально.
  • Размещение текста будет утомительным, если размеры не статичны.

Метод 5 - путь клипа CSS

( Совместимость с браузером )

В этом методе основной контейнер обрезается до необходимой формы с помощью многоугольника. Точки многоугольника следует изменить в зависимости от того, на какой стороне требуется наклонный край.

Плюсы

  • Форма может сохраняться даже при динамическом изменении размера контейнера.
  • Эффект наведения будет полностью ограничен рамками фигуры.
  • Изображение также можно использовать в качестве фона для фигуры.

Минусы

  • Поддержка браузеров в настоящее время очень слабая.
  • Границы можно добавить, поместив абсолютно позиционированный элемент поверх фигуры и придав ему необходимый зажим, но за пределами точки он не подходит при динамическом изменении размера.

Метод 6 - Холст

( Совместимость с браузером )

Холст также можно использовать для создания формы путем рисования контуров. В приведенном ниже фрагменте есть демонстрация. Любой требуемый текстовый контент может быть размещен поверх фигуры.

Плюсы

  • Форма может быть достигнута и сохранена, даже если размеры контейнера являются динамическими. Также можно добавить границы.
  • Эффект наведения можно ограничить рамками фигуры с помощью pointInpathметода.
  • Фигуре также можно придать изображение или градиентный фон.
  • Лучший выбор, если требуются эффекты анимации в реальном времени, поскольку для этого не требуется манипулирование DOM.

Минусы

  • Холст основан на растре, поэтому наклонные края станут пиксельными или размытыми при масштабировании за пределы точки * .

* - Чтобы избежать пикселизации, потребуется перекрашивать форму при изменении размера области просмотра. Существует пример его здесь , но это накладные расходы.


36

Я пробовал использовать метод границы, но размеры моей формы динамические, поэтому я не могу использовать этот метод.


Метод 7 - Единицы видового экрана (Border Redux )

( Совместимость с браузером )

Единицы просмотра - отличное нововведение в CSS3. Хотя обычно вы можете использовать процентные значения для динамизации ваших свойств, вы не можете сделать это ни для border-widths ( ни для font-sizes ).

Вместо этого с помощью единиц просмотра вы можете динамически устанавливать ширину границ вместе с размерами ваших объектов по сравнению с размером области просмотра.

Примечание: процентные значения относятся к родительскому объекту, а не к области просмотра (видимая область окна).

Чтобы протестировать метод, запустите следующий фрагмент полной страницы и измените его размер по горизонтали и вертикали.

.shape {
    position: relative;
    height: 20vh;
    width: 40vw;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    left: 0px;
    right: 0px;
    top: 20vh;
    border-width: 10vh 20vw;
    border-style: solid;
    border-color: tomato tomato rgba(0,0,0,0) rgba(0,0,0,0);
}
<div class="shape">Some content</div>

Плюсы - (1) Все динамично, охват браузером широкий.

Минусы - (1) Следует обратить внимание на том , как ваша операционная система обрабатывает скроллбар с overflow: auto;.


3
В последней версии хрома кажется неровной.
Mr_Green

Правда! Я предполагаю, что браузерам еще нужно время, чтобы отрисовать это плавно. У Firefox также есть эта проблема при использовании этой техники с пикселями вместо единиц области просмотра, но ее можно исправить, используя rgba (,,, 0) вместо прозрачного. К счастью, сейчас у нас есть другие варианты;)
Андреа Лиджиос

1

Мое решение основано на методе 7 - Viewport Units от Андреа Лиджиос, описанном выше на этой странице.

Я также использовал «горизонтальную» единицу для высоты ( height:10vw), чтобы сохранить заданные пропорции трапеции при изменении ширины окна навигации. Мы могли бы назвать этот метод 7b - Ширина области просмотра .

Кроме того, на мой взгляд , использование двух вложенных divs вместо одного и :afterселектора позволяет лучше настроить стили текстового содержимого (например text-align, и т. Д.).

.dtrapz {
  position: relative;
  margin: 10px 40vw;
  width: 0;
  height: 10vw;
  border: none;
  border-right: 20vw solid #f22;
  border-bottom: 5vw solid transparent;
}

.dtcont {
  position: absolute;
  width: 20vw;
  height: 10vw;
  text-align: center;
  color: #fff;/* just aesthetic */
}
<div class="dtrapz">
  <div class="dtcont">Some content</div>
</div>


@ Downvoter Привет! Сообщите мне, что не так с моим ответом, чтобы я мог отредактировать или удалить его, если это имеет смысл! Я не специалист, но мне кажется, что это можно применить на многих страницах, работать с более длинным текстовым контентом, в зависимости только от ширины :)
MattAllegro
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.