CSS поворачивает таблицу, но сохраняет ориентацию ячейки - PullRequest
Новая
       21

CSS поворачивает таблицу, но сохраняет ориентацию ячейки

0 голосов
/ 09 марта 2019

У меня угловой нижний колонтитул: 

.angled{
background-color: red;
height: 120px;
width: 100%;
  -webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}
<div class="angled"></div>

Теперь я хочу разместить в нем навигацию.

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

Или у кого-то есть лучшее представление о том, как это сделать?

1 Ответ

1 голос
/ 10 марта 2019

Можно подумать о перекосе контейнера, а затем окошке элемента внутри: 

.angled {
  background-color: red;
  height: 120px;
  width: 100%;
  -webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}

.container {
  color: #fff;
  display: flex;
  justify-content: space-between;
  transform-origin: right;
  transform: skewY(-6deg);
}

.container>span {
  transform-origin: left;
  transform: skewY(6deg);
}
<div class="angled">
  <div class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <span>item4</span>
  </div>
</div>

Как видите, угол нужно менять в зависимости от размера, поскольку он определяется как tan(angle) = h/w, где w - ширина элемента, который являетсяэлемент блока (это динамический), и h составляет 40% от высоты, часть удаляется с помощью clip-path (это статический элемент).

Вот небольшой код JS, который вы можете добавитьчтобы исправить угол перекоса при изменении размера экрана: 

var elem = document.querySelector('.angled');

var w = elem.offsetWidth;
elem.style.setProperty("--a", (Math.atan(48/w)*180/Math.PI )+"deg");

window.onresize = function(event) {
    w = elem.offsetWidth;
    elem.style.setProperty("--a", (Math.atan(48/w)*180/Math.PI )+"deg");
};
.angled {
  background-color: red;
  height: 120px;
  width: 100%;
  -webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}

.container {
  color: #fff;
  display: flex;
  justify-content: space-between;
  transform-origin: right;
  transform: skewY(calc(-1 * var(--a)));
}

.container>span {
  transform-origin: left;
  transform: skewY(var(--a));
}
<div class="angled">
  <div class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <span>item4</span>
  </div>
</div>

И так как мы используем перекос, вы можете избавиться от clip-path и рассмотреть фон на перекошенном элементе: 

var elem = document.querySelector('.angled');

var w = elem.offsetWidth;
elem.style.setProperty("--a", (Math.atan(48/w)*180/Math.PI )+"deg");

window.onresize = function(event) {
    w = elem.offsetWidth;
    elem.style.setProperty("--a", (Math.atan(48/w)*180/Math.PI )+"deg");
};
.angled {
  height: 120px;
  width: 100%;
  overflow: hidden;
}

.container {
  color: #fff;
  background:red;
  height:100%;
  display: flex;
  justify-content: space-between;
  transform-origin: right;
  transform: skewY(calc(-1 * var(--a)));
}

.container>span {
  transform-origin: left;
  transform: skewY(var(--a));
}
<div class="angled">
  <div class="container">
    <span>item1</span>
    <span>item2</span>
    <span>item3</span>
    <span>item4</span>
  </div>
</div>
...