在视口宽度和高度变化上保持剪辑路径的角度

Question

我试图创建一些类似的例子，其中剪辑路径的角度需要保持不变的大小。在高度和宽度上都会更改到视图端口。我尝试过使用calc(100% - 6vw) (作为一个例子)，但这并不能保持确切的角度。

原因是我将有多个元素，这些元素需要在响应环境中具有镜像角度。

这可以单独使用CSS和calc来实现吗?还是有一个基于JS的数学解决方案来解决这个问题？我想这就是三角学出现的原因，我相信我需要的是相对于内容区域的相邻/高度的相对边长(然而，我数学不及格……)保持相同的角度。

一些工作，我已经做了基于一个模拟-我正在工作。我需要找到的角度是14度。我的基础是相邻的是899px和相反的229px。

任何帮助都是非常感谢的。

​

body {
  margin: 0;
}

.slide {
  background-color: red;
  height: 100vh;
  position: relative;
}

.slide_content {
  background-color: blue;
  padding: 50px 30px;
  color: #fff;
  position: absolute;
  width: 70%;
  left: 0;
  bottom: 0;
  clip-path: polygon(0 0, 90% 0, 102% 100%, 0% 100%);
}

.slide_content-top {
  background-color: orange;
  padding: 50px 30px;
  color: #fff;
  position: absolute;
  width: 70%;
  right: 0;
  top: 0;
  padding-left: 100px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);

}

<div class="slide">
  <div class="slide_content-top">
    <h2>More content here</h2>
  </div>
  <div class="slide_content">
    <h2>Some text goes here</h2>
  </div>
</div>

​

另一个例子

因此，我将如何应用这一点，如下所示-红色的形状是文本内容放置的位置。蓝色区域是我需要创建的直角三角形。随着内容区域的增长或缩小，三角形将需要保持它的比率。这个三角形的底部(本例中为width: 85px)需要根据内容区域的高度(当前为height: 200px)按比例调整大小。

我所知道的唯一值是低音和邻接(14 Area)之间的锐角，而相邻的长度将通过从内容区域的当前高度得到它来计算。

​

.shape {
  width: 400px;
  height: 200px;
  background-color: red;
  position: relative;
}

.shape:after {
  content: '';
  position: absolute;
  width: 85px;
  height: 200px;
  background-color: blue;
  top: 0;
  bottom: 0;
  right: -85px;
  clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);
}

<div class="shape"></div>

​

进一步更新

这就是我到目前为止所取得的成就。我觉得这也是我想要的。创建一个在调整大小时保持相同比率的直角。但是，我并不完全确定我创建的这个特定片段有多健壮。

​

function getTanFromDegrees(degrees) {
  return Math.tan(degrees * Math.PI / 180);
}



function createRightAngleTriangle() {
  const shapes = document.querySelectorAll('.shape');
  
  shapes.forEach(shape => {
    const shapeContent = shape.querySelector('.shape-content');
    const shapeTri = shape.querySelector('.shape-tri');
    
    const shapeHeight = shapeContent.offsetHeight; 
    
    const tan = getTanFromDegrees(14);
    const getLength = Math.floor(tan * shapeHeight);

    shapeTri.style.height = shapeHeight + 'px';
    shapeTri.style.width = getLength + 'px';

  })
}

window.addEventListener('load', createRightAngleTriangle);
window.addEventListener('resize', createRightAngleTriangle);

.shape {
  display: flex;
  align-items: flex-start;
}

.shape-content {
  padding: 20px;
  font-size: 22px;
  
}

.shape-tri {
  background-color:green;
  clip-path: polygon(0 0, 0 0, 100% 100%, 0% 100%);

}

.shape-1 .shape-content {
  background-color: red;
}

.shape-2 .shape-content {
  background-color: blue;
}

<div class="shape shape-1">
  <div class="shape-content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aut deleniti dolor doloremque, nesciunt minus voluptatem! Voluptas odio obcaecati vitae?
  </div>
  <div class="shape-tri"></div>
</div>
<div class="shape shape-2">
  <div class="shape-content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores aut deleniti dolor doloremque, nesciunt minus voluptatem! Voluptas odio obcaecati vitae? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut, eos.
  </div>
  <div class="shape-tri"></div>
</div>

​

Answer 1

你可以试试下面的样子。值0.25是tan(14deg)

​

body {
  margin: 0;
}

.slide {
  background-color: red;
  min-height: 100vh;
  display:grid;
  grid-auto-rows:1fr;
  color: #fff;
}

.slide_content {
  background: blue;
  box-shadow: 200px 0 blue;
  padding: 30px;
  width: 70%;
  margin-top:auto;
  clip-path: polygon(0 0, 100% 0, calc(100% + 0.25*100vmax) 100vmax, 0 100vmax);
}

.slide_content-top {
  background-color: orange;
  box-shadow: -200px 0 orange;
  padding: 30px;
  width: 70%;
  margin-left: auto;
  margin-bottom:auto;
  clip-path: polygon(calc(-0.25*100vmax) -100vmax ,100% -100vmax, 100% 100%, 0 100%);
  
}

<div class="slide">
  <div class="slide_content-top">
    <h2>More content here</h2>
  </div>
  <div class="slide_content">
    <h2>Some text <br> goes here</h2>
  </div>
</div>

​