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

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>

Развернуть фрагмент

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

Показать фрагмент кода

.gradient {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 100px;
  margin: 10px;
  color: beige;
  transition: all 1s;
  padding: 10px;
  background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
  width: 200px;
}

<div class="gradient"></div>

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

html css responsive-design css-shapes Гарри
источник

Ответы:

128

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

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

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

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

Метод 1 - SVG

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

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

Показать фрагмент кода

$(document).ready(function() {
  $('#increasew-vector').on('click', function() {
    $('.vector').css({
      'width': '150px',
      'height': '100px'
    });
  });
  $('#increaseh-vector').on('click', function() {
    $('.vector').css({
      'width': '100px',
      'height': '150px'
    });
  });
  $('#increaseb-vector').on('click', function() {
    $('.vector').css({
      'width': '150px',
      'height': '150px'
    });
  });
})

div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 20px;
  color: beige;
  transition: all 1s;
}
.vector {
  position: relative;
}
svg {
  position: absolute;
  margin: 10px;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 0;
}
polygon {
  fill: tomato;
}
.vector > span {
  position: absolute;
  display: block;
  padding: 10px;  
  z-index: 1;
}
.vector.top > span{
  height: 50%;
  width: 100%;
  top: calc(40% + 5px); /* size of the angled area + buffer */
  left: 5px;  
}
.vector.bottom > span{
  height: 50%;
  width: 100%;
  top: 5px;
  left: 5px;  
}
.vector.left > span{
  width: 50%;
  height: 100%;
  left: 50%; /* size of the angled area */
  top: 5px;  
}
.vector.right > span{
  width: 50%;
  height: 100%;
  left: 5px;
  top: 5px;  
}



/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}

polygon:hover, span:hover + svg > polygon{
  fill: steelblue;
}

.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}

button {
  width: 150px;
  margin-bottom: 10px;
}

.vector.left{
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vector bottom">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 40,0 40,100 0,60" />
  </svg>
</div>
<div class="vector top">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,40 40,0 40,100 0,100" />
  </svg>
</div>
<div class="vector left">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 40,0 40,100 20,100" />
  </svg>
</div>
<div class="vector right">
  <span>Some content</span>
  <svg viewBox="0 0 40 100" preserveAspectRatio="none">
    <polygon points="0,0 20,0 40,100 0,100" />
  </svg>
</div>

<div class='btn-container'>
  <button id="increasew-vector">Increase Width</button>
  <button id="increaseh-vector">Increase Height</button>
  <button id="increaseb-vector">Increase Both</button>
</div>

Развернуть фрагмент

Плюсы

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

Минусы

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

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

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

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

Показать фрагмент кода

$(document).ready(function() {
  $('#increasew-gradient').on('click', function() {
    $('.gradient').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-gradient').on('click', function() {
    $('.gradient').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-gradient').on('click', function() {
    $('.gradient').css({
      'height': '150px',
      'width': '150px'
    });
  });
})

div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 10px 20px;
  color: beige;
  transition: all 1s;
}
.gradient{
  position: relative;
}
.gradient.bottom {
  background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 100% 40%, 100% 60%;
  background-position: 0% 100%, 0% 0%;
}
.gradient.top {
  background: linear-gradient(to bottom right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to bottom right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 100% 40%, 100% 60%;
  background-position: 0% 0%, 0% 100%;
}
.gradient.left {
  background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 40% 100%, 60% 100%;
  background-position: 0% 0%, 100% 0%;
}
.gradient.right {
  background: linear-gradient(to top left, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top left, transparent 0.1%, tomato 0.1%) no-repeat;
  background-size: 40% 100%, 60% 100%;
  background-position: 100% 0%, 0% 0%;
}
.gradient span{
  position: absolute;
}
.gradient.top span{
  top: calc(40% + 5px); /* background size + buffer */ 
  left: 5px;
  height: 50%;
}
.gradient.bottom span{
  top: 5px;
  left: 5px;
  height: 50%;
}
.gradient.left span{
  left: 40%; /* background size */
  top: 5px;
  width: 50%;
}
.gradient.right span{
  left: 5px;
  top: 5px;
  width: 50%;
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}

.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
.gradient.left{
  clear:both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient bottom"><span>Some content</span>
</div>
<div class="gradient top"><span>Some content</span>
</div>
<div class="gradient left"><span>Some content</span>
</div>
<div class="gradient right"><span>Some content</span>
</div>

<div class='btn-container'>
  <button id="increasew-gradient">Increase Width</button>
  <button id="increaseh-gradient">Increase Height</button>
  <button id="increaseb-gradient">Increase Both</button>
</div>

Развернуть фрагмент

Плюсы

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

Минусы

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

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

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

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

Показать фрагмент кода

$(document).ready(function() {
  $('#increasew-skew').on('click', function() {
    $('.skew').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-skew').on('click', function() {
    $('.skew').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-skew').on('click', function() {
    $('.skew').css({
      'height': '150px',
      'width': '150px'
    });
  });
})

div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 50px;
  color: beige;
  transition: all 1s;
}
.skew {
  padding: 10px;
  position: relative;
  background: tomato;
}
.skew:after {
  position: absolute;
  content: '';
  background: inherit;
  z-index: -1;
}
.skew.bottom:after,
.skew.top:after {
  width: 100%;
  height: 60%;
}
.skew.left:after,
.skew.right:after {
  height: 100%;
  width: 60%;
}
.skew.bottom:after {
  bottom: 0px;
  left: 0px;
  transform-origin: top left;
  transform: skewY(22deg);
}
.skew.top:after {
  top: 0px;
  left: 0px;
  transform-origin: top left;
  transform: skewY(-22deg);
}
.skew.left:after {
  top: 0px;
  left: 0px;
  transform-origin: bottom left;
  transform: skewX(22deg);
}
.skew.right:after {
  top: 0px;
  right: 0px;
  transform-origin: bottom right;
  transform: skewX(-22deg);
}
.skew:hover {
  background: steelblue;
}
/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.skew.bottom {
  margin-top: 10px;
}
.skew.left {
  clear: both;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skew bottom">Some content</div>
<div class="skew top">Some content</div>
<div class="skew left">Some content</div>
<div class="skew right">Some content</div>

<div class='btn-container'>
  <button id="increasew-skew">Increase Width</button>
  <button id="increaseh-skew">Increase Height</button>
  <button id="increaseb-skew">Increase Both</button>
</div>

Развернуть фрагмент

Плюсы

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

Минусы

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

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

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

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

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

Показать фрагмент кода

$(document).ready(function() {
  $('#increasew-rotate').on('click', function() {
    $('.rotate').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-rotate').on('click', function() {
    $('.rotate').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-rotate').on('click', function() {
    $('.rotate').css({
      'height': '150px',
      'width': '150px'
    });
  });
})

div {
  float: left;
  height: 100px;
  width: 100px;
  margin: 50px;
  color: beige;
  transition: all 1s;
}
.rotate {
  position: relative;
  width: 100px;
  background: tomato;
}
.rotate.bottom {
  transform-origin: top;
  transform: perspective(10px) rotateY(-2deg);
}
.rotate.top {
  transform-origin: bottom;
  transform: perspective(10px) rotateY(-2deg);
}
.rotate.left {
  transform-origin: right;
  transform: perspective(10px) rotateX(-2deg);
}
.rotate.right {
  transform-origin: left;
  transform: perspective(10px) rotateX(-2deg);
}
.rotate span {
  position: absolute;
  display: block;
  top: 0px;
  right: 0px;
  width: 50%;
  height: 100%;
}
.rotate.bottom span {
  padding: 10px;
  transform-origin: top;
  transform: perspective(10px) rotateY(2deg);
}
.rotate.top span {
  padding: 20px;
  transform-origin: bottom;
  transform: perspective(20px) rotateY(2deg);
}
.rotate.left span {
  padding: 10px;
  transform-origin: right;
  transform: perspective(10px) rotateX(2deg);
}
.rotate.right span {
  padding: 0px 30px;
  transform-origin: left;
  transform: perspective(10px) rotateX(2deg);
}
.rotate:hover {
  background: steelblue;
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.rotate.left{
  clear:both;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate bottom"><span>Some content</span>
</div>
<div class="rotate top"><span>Some content</span>
</div>
<div class="rotate left"><span>Some content</span>
</div>
<div class="rotate right"><span>Some content</span>
</div>

<div class='btn-container'>
  <button id="increasew-rotate">Increase Width</button>
  <button id="increaseh-rotate">Increase Height</button>
  <button id="increaseb-rotate">Increase Both</button>
</div>

Развернуть фрагмент

Плюсы

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

Минусы

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

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

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

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

Показать фрагмент кода

$(document).ready(function() {
  $('#increasew-clip').on('click', function() {
    $('.clip-path').css({
      'height': '100px',
      'width': '150px'
    });
  });
  $('#increaseh-clip').on('click', function() {
    $('.clip-path').css({
      'height': '150px',
      'width': '100px'
    });
  });
  $('#increaseb-clip').on('click', function() {
    $('.clip-path').css({
      'height': '150px',
      'width': '150px'
    });
  });
})

.clip-path {
  position: relative;
  float: left;
  margin: 20px;
  height: 100px;
  width: 100px;
  background: tomato;
  padding: 4px;
  transition: all 1s;
}
.clip-path.bottom {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top {
  -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path.left {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40% 100%);
}
.clip-path.right {
  -webkit-clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%);
}
.clip-path .content {
  position: absolute;
  content: '';
  height: calc(100% - 10px);
  width: calc(100% - 8px);
  background: bisque;
}
.clip-path.bottom .content {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top .content {
  -webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path .content.img {
  top: 6px;
  background: url(http://lorempixel.com/250/250);
  background-size: 100% 100%;
}
/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.clip-path.left {
  clear: both;
}
.clip-path:hover {
  background: gold;
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 20px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clip-path bottom">
  <div class="content">abcd</div>
</div>
<div class="clip-path top">
  <div class="content img"></div>
</div>
<div class="clip-path left"></div>
<div class="clip-path right"></div>

<div class='btn-container'>
  <button id="increasew-clip">Increase Width</button>
  <button id="increaseh-clip">Increase Height</button>
  <button id="increaseb-clip">Increase Both</button>
</div>

Развернуть фрагмент

Плюсы

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

Минусы

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

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

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

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

Показать фрагмент кода

window.onload = function() {
  var canvasEls = document.getElementsByTagName('canvas');
  for (var i = 0; i < canvasEls.length; i++) {
    paint(canvasEls[i]);
  }

  function paint(canvas) {
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    if (canvas.className == 'bottom') {
      ctx.moveTo(0, 0);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 60);
    } else if (canvas.className == 'top') {
      ctx.moveTo(0, 40);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 100);
    } else if (canvas.className == 'left') {
      ctx.moveTo(0, 0);
      ctx.lineTo(250, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(60, 100);
    } else if (canvas.className == 'right') {
      ctx.moveTo(0, 0);
      ctx.lineTo(190, 0);
      ctx.lineTo(250, 100);
      ctx.lineTo(0, 100);
    }
    ctx.closePath();
    ctx.lineCap = 'round';
    ctx.fillStyle = 'tomato';
    ctx.fill();
  }
  $('#increasew-canvas').on('click', function() {
    $('.container').css({
      'width': '150px',
      'height': '100px'
    });
  });
  $('#increaseh-canvas').on('click', function() {
    $('.container').css({
      'width': '100px',
      'height': '150px'
    });
  });
  $('#increaseb-canvas').on('click', function() {
    $('.container').css({
      'width': '150px',
      'height': '150px'
    });
  });
};

.container {
  float: left;
  position: relative;
  height: 100px;
  width: 100px;
  margin: 20px;
  color: beige;
  transition: all 1s;
}
canvas {
  height: 100%;
  width: 100%;
}
.container > span {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 5px;
}
.top + span {
  top: 40%; /* size of the angled area */
}
.left + span {
  left: 40%; /* size of the angled area */
}

/* Just for demo */

body {
  background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 150px;
}
button {
  width: 150px;
  margin-bottom: 10px;
}
div:nth-of-type(3) {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <canvas height="100px" width="250px" class="bottom"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="top"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="left"></canvas> <span>Some content</span>

</div>
<div class="container">
  <canvas height="100px" width="250px" class="right"></canvas> <span>Some content</span>

</div>
<div class='btn-container'>
  <button id="increasew-canvas">Increase Width</button>
  <button id="increaseh-canvas">Increase Height</button>
  <button id="increaseb-canvas">Increase Both</button>
</div>

Развернуть фрагмент

Плюсы

Форма может быть достигнута и сохранена, даже если размеры контейнера являются динамическими. Также можно добавить границы.
Эффект наведения можно ограничить рамками фигуры с помощью 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>

Развернуть фрагмент

MattAllegro
источник

@ Downvoter Привет! Сообщите мне, что не так с моим ответом, чтобы я мог отредактировать или удалить его, если это имеет смысл! Я не специалист, но мне кажется, что это можно применить на многих страницах, работать с более длинным текстовым контентом, в зависимости только от ширины :)

MattAllegro