CSS / JS - 计算 div 的角度和间距

Question

我正在开发我网站的移动版本。我将一个元素放在另一个元素下方（红色在蓝色下方）。这些元素的形状为：clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 62%, 50% 85%, 0% 62%).

他们还得到了一个叠加层，其中放置了一个文本。我的目标是为每个显示分辨率修复右下角的这个文本块。

它在每台设备上的外观：

更改视口宽度时的外观：

首先我写了几个 @media (...) 查询来定位文本块。我注意到我必须为几乎每个设备分别编写查询，因为文本块所需的顶部间距和角度总是在变化。

所以我试着计算top需要的角度和需要的值。我在 Whosebug 上找到了一个看起来像这样的方法：

function calculate() {
    const deviceWidth = screen.width;
    const viewportWidth = window.innerWidth;
    const currentRatio = viewportWidth / deviceWidth;
    const angle = currentRatio * ...; // I don't know
    const top = ...; // I don't know

    document.querySelector('.text-container').style.transform = `rotate(${angle}deg)`;
    document.querySelector('.text-container').style.top = `${top}vh`;
}

calculate();
window.addEventListener('resize', calculate);

我很确定，这个方法很有用，但我不知道如何继续。

谢谢。

Answer 1

我会使用渐变和蒙版以不同方式执行此操作：

.box {
  padding-top: 200px; /* this will control the overal height */
  overflow:hidden;
  position:relative;
}
.box div {
  padding: 10px 0 10px 100%; /* padding-left:100% to push the text to the center */
  color: #fff;
  font-size:25px;
  background: #248a8a;
  transform-origin:bottom;
  transform:rotate(-20deg); /* control the rotation of the text */
  margin:0 -50% 0; /* negative margin to create some overlow and avoid the bad effect of rotation */
}

.one {
  background:cyan;
}
.one::before {
  content:"";
  position:absolute;
  z-index:9;
  pointer-events:none;
  inset:0;
  background: 
    linear-gradient(to bottom right,#0000 49.8%,#dc143c 50%) bottom 0 right calc(50% - 500px),
    linear-gradient(to bottom left ,#0000 49.8%,#dc143c 50%) bottom 0 left  calc(50% - 500px);
  /* keep the 1000px a random but big value 
     adjust 363px based on the angle you will be using
     The formula is tan(20deg) = 363/1000
  */
  background-size:1000px 363px; 
  background-repeat:no-repeat;
}

.two {
  background:#dc143c;
  -webkit-mask:
    linear-gradient(to bottom right,#000 49.8%,#0000 50%) bottom 0 right calc(50% - 500px),
    linear-gradient(to bottom left ,#000 49.8%,#0000 50%) bottom 0 left  calc(50% - 500px);
  /* same logic as above */
  -webkit-mask-size:1000px 363px;
  -webkit-mask-repeat:no-repeat;
}
.two div {
  background:#7c2c3c;
}

<div class="box one">
  <div>Text block 1</div>
</div>
<div class="box two">
  <div>Text block 1</div>
</div>

CSS / JS - 计算 div 的角度和间距

CSS / JS - calculate angle and spacing for div

javascript

css

sass

responsive-design