Фігура з косою стороною (чуйний)

Question 1

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

CSS div з косою стороною

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

.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>

Розгорніть фрагмент

Як я можу створити цю фігуру з косою стороною, а також підтримати динамічні розміри ?

Question 2

Існує багато способів створити фігуру з косим краєм лише з одного боку.

Наступні методи не можуть підтримувати динамічні розміри, як уже зазначалося у питанні:

Метод прикордонного трикутника зі значеннями пікселів для 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.

Мінуси

Полотно базується на растровій основі, а отже, кутові краї стануть нерівними або розмитими при масштабуванні поза точкою ^* .

^{* - Щоб уникнути пікселізації, потрібно буде перефарбовувати фігуру щоразу, коли зменшується розмір області перегляду. Існує приклад його тут , але це накладні витрати.}

Question 3

Я спробував використовувати метод кордону, але розміри моєї фігури динамічні, і тому я не можу використовувати цей метод.

Метод 7 - Одиниці оглядового вікна ^{(Border Redux )}

( Сумісність браузера )

Блоки огляду - чудова інновація в CSS3. Хоча ви зазвичай можете використовувати відсоткові значення для динамізації своїх властивостей, ви не можете це зробити для border-widths ( ані для font-sizes ).

Натомість із засобами огляду Viewport ви можете динамічно встановлювати ширину меж разом із розмірами об’єктів у порівнянні з розміром області перегляду.

_{Примітка: відсоткові значення посилаються на батьківський об'єкт, а не на область перегляду (видима область вікна).}

Щоб перевірити метод, запустіть наступний фрагмент Повна сторінка та змініть його розмір як по горизонталі, так і по вертикалі.

.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;.

Question 4

Моє рішення натхнене методом 7 - Блоки огляду від Андреа Лігіос, вище на цій сторінці.

Я також використовував "горизонтальну" одиницю для висоти ( height:10vw), щоб зберегти задані пропорції в трапеції при зміні розміру ширини навігаційного вікна. Ми могли б назвати цей метод 7b - Ширина області перегляду .

Крім того, використання двох вкладених символів divзамість одного та :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>

Розгорніть фрагмент

Фігура з косою стороною (чуйний)

Спосіб 1 - SVG

Метод 2 - Градиентне тло

Метод 3 - Перекоси перетворення

Метод 4 - Перспективні перетворення

Спосіб 5 - Шлях кліпу CSS

Спосіб 6 - Полотно

Метод 7 - Одиниці оглядового вікна (Border Redux )

Метод 7 - Одиниці оглядового вікна ^{(Border Redux )}