如下所示，我有一个clip-path由百分比组成的div，它在角落处把div剪裁掉。我的要求是让裁剪的尺寸与div的高度无关，可能需要用像素来实现。

function toggleDiv() {
  const div = document.getElementById("toggle");
  const btn = document.getElementById("toggleBtn");

  // Toggle display
  if (div.style.display === "none" || div.style.display === "") {
    div.style.display = "block";
    btn.innerHTML = "Hide"; // Change button text
  } else {
    div.style.display = "none";
    btn.innerHTML = "Show more"; // Change button text
  }
}

.trim {
  clip-path: polygon(90% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
}

.style {
  background: #00000050;
  padding: 40px
}

#toggle {
  display: none;
}

#toggleBtn {
  font-weight: bold;
}

<div class="trim style">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet sagittis nibh, ac posuere velit. Duis a nulla dapibus, elementum metus vitae, viverra nisl. Ut ultrices, est et aliquam sollicitudin, felis diam ultrices sapien, vitae porttitor sapien arcu sed augue. Ut finibus, ipsum ut rutrum placerat, eros metus hendrerit enim, eget maximus elit libero nec sem. 

  Vivamus gravida nibh dui, nec tincidunt neque ullamcorper quis. Nulla non libero sed felis sagittis sollicitudin. Ut tempor rutrum velit non tristique. 
    <span id="toggleBtn" onclick="toggleDiv()">Show more</span>
  <span id="toggle">
  Phasellus pharetra, felis non vestibulum molestie, ante mauris volutpat nulla, sed volutpat massa mi vitae leo. Ut commodo erat quis dolor ornare, nec lobortis libero mollis. 

  Sed ullamcorper purus sit amet tortor pretium, eget suscipit ligula scelerisque. Fusce iaculis feugiat metus, eu aliquam justo condimentum in. Praesent tristique metus eu finibus ullamcorper. In nibh nisi, luctus vitae scelerisque vitae, volutpat et sem. Suspendisse viverra velit et ex molestie feugiat.


Nunc dignissim odio eget nulla sagittis, et cursus ligula malesuada. Fusce nec quam ipsum. Vestibulum quis massa id erat viverra commodo eu in massa. Vestibulum semper placerat ligula eget viverra. Vivamus sed tortor massa. Fusce pretium rhoncus dui, quis mattis urna euismod vel. Mauris ultricies, dolor at tincidunt pulvinar, tortor risus suscipit enim, nec cursus neque magna vitae erat. Etiam maximus ante enim, vel elementum sem finibus sit amet. Cras quis erat in tellus pellentesque congue. Cras accumsan sodales gravida. Nulla in cursus diam, a feugiat ex. Sed blandit augue sed odio hendrerit, at malesuada nisi elementum. In molestie auctor mi sed tristique. Aliquam nunc elit, molestie at rutrum nec, ultricies eu velit. Nunc nulla turpis, elementum nec mi nec, tempor porta augue.

Cras venenatis nibh diam, vitae interdum ipsum fermentum et. Fusce felis lacus, fringilla vitae auctor id, imperdiet et ipsum. Curabitur pharetra est pretium, ornare justo sit amet, malesuada nisi. Sed gravida magna eget fermentum sodales. Nam eget justo orci. Phasellus quis dolor nec dolor lobortis consequat in sed ex. Donec venenatis justo sollicitudin nulla accumsan, et cursus neque posuere. Donec id mollis metus, sit amet ultricies augue. Sed eget aliquet dui. Praesent in pellentesque neque. Cras volutpat luctus justo, vitae sodales sapien imperdiet eu. Vivamus nisi justo, tempus eget vulputate eget, luctus quis purus.

Phasellus mollis gravida metus sollicitudin laoreet. Quisque vel varius nulla, ac ultricies ipsum. Nam suscipit mollis lorem quis aliquet. Praesent sed orci et dolor condimentum fermentum et non magna. Sed a velit suscipit, bibendum metus maximus, mollis est. Suspendisse quis nulla ac mi lacinia pellentesque ac sed enim. Duis vel sem venenatis, vehicula libero id, blandit velit. Etiam eleifend enim nec nisi iaculis, nec congue massa eleifend. Nulla vitae felis vel mi placerat sodales ac nec dolor. In ut augue in felis posuere pellentesque.

Maecenas tristique non tortor eu accumsan. Duis sit amet maximus massa. Sed eu ipsum et metus iaculis tincidunt sed a enim. Curabitur at nunc tempus, tempor augue eget, iaculis ligula. Proin eget massa non arcu feugiat ultricies. Suspendisse eleifend nunc consequat dolor sodales, in aliquam lorem pretium. Donec ullamcorper, mi eu feugiat interdum, nibh turpis porttitor odio, ut iaculis ante justo id lectus.
</span>
</div>

解决方案

我搞定了。我只需要改变决定右上角斜率的第二个参数，如下所示：

.trim {
  clip-path: polygon(90% 0, 100% 55px, 100% 100%, 0 100%, 0 0);
}

代码片段：

function toggleDiv() {
  const div = document.getElementById("toggle");
  const btn = document.getElementById("toggleBtn");

  // Toggle display
  if (div.style.display === "none" || div.style.display === "") {
    div.style.display = "block";
    btn.innerHTML = "Hide"; // Change button text
  } else {
    div.style.display = "none";
    btn.innerHTML = "Show more"; // Change button text
  }
}

.trim {
  clip-path: polygon(90% 0, 100% 55px, 100% 100%, 0 100%, 0 0);
}

.style {
  background: #00000050;
  padding: 40px
}

#toggle {
  display: none;
}

#toggleBtn {
  font-weight: bold;
}

<div class="trim style">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet sagittis nibh, ac posuere velit. Duis a nulla dapibus, elementum metus vitae, viverra nisl. Ut ultrices, est et aliquam sollicitudin, felis diam ultrices sapien, vitae porttitor sapien arcu sed augue. Ut finibus, ipsum ut rutrum placerat, eros metus hendrerit enim, eget maximus elit libero nec sem. 

  Vivamus gravida nibh dui, nec tincidunt neque ullamcorper quis. Nulla non libero sed felis sagittis sollicitudin. Ut tempor rutrum velit non tristique. 
    <span id="toggleBtn" onclick="toggleDiv()">Show more</span>
  <span id="toggle">
  Phasellus pharetra, felis non vestibulum molestie, ante mauris volutpat nulla, sed volutpat massa mi vitae leo. Ut commodo erat quis dolor ornare, nec lobortis libero mollis. 

  Sed ullamcorper purus sit amet tortor pretium, eget suscipit ligula scelerisque. Fusce iaculis feugiat metus, eu aliquam justo condimentum in. Praesent tristique metus eu finibus ullamcorper. In nibh nisi, luctus vitae scelerisque vitae, volutpat et sem. Suspendisse viverra velit et ex molestie feugiat.


Nunc dignissim odio eget nulla sagittis, et cursus ligula malesuada. Fusce nec quam ipsum. Vestibulum quis massa id erat viverra commodo eu in massa. Vestibulum semper placerat ligula eget viverra. Vivamus sed tortor massa. Fusce pretium rhoncus dui, quis mattis urna euismod vel. Mauris ultricies, dolor at tincidunt pulvinar, tortor risus suscipit enim, nec cursus neque magna vitae erat. Etiam maximus ante enim, vel elementum sem finibus sit amet. Cras quis erat in tellus pellentesque congue. Cras accumsan sodales gravida. Nulla in cursus diam, a feugiat ex. Sed blandit augue sed odio hendrerit, at malesuada nisi elementum. In molestie auctor mi sed tristique. Aliquam nunc elit, molestie at rutrum nec, ultricies eu velit. Nunc nulla turpis, elementum nec mi nec, tempor porta augue.

Cras venenatis nibh diam, vitae interdum ipsum fermentum et. Fusce felis lacus, fringilla vitae auctor id, imperdiet et ipsum. Curabitur pharetra est pretium, ornare justo sit amet, malesuada nisi. Sed gravida magna eget fermentum sodales. Nam eget justo orci. Phasellus quis dolor nec dolor lobortis consequat in sed ex. Donec venenatis justo sollicitudin nulla accumsan, et cursus neque posuere. Donec id mollis metus, sit amet ultricies augue. Sed eget aliquet dui. Praesent in pellentesque neque. Cras volutpat luctus justo, vitae sodales sapien imperdiet eu. Vivamus nisi justo, tempus eget vulputate eget, luctus quis purus.

Phasellus mollis gravida metus sollicitudin laoreet. Quisque vel varius nulla, ac ultricies ipsum. Nam suscipit mollis lorem quis aliquet. Praesent sed orci et dolor condimentum fermentum et non magna. Sed a velit suscipit, bibendum metus maximus, mollis est. Suspendisse quis nulla ac mi lacinia pellentesque ac sed enim. Duis vel sem venenatis, vehicula libero id, blandit velit. Etiam eleifend enim nec nisi iaculis, nec congue massa eleifend. Nulla vitae felis vel mi placerat sodales ac nec dolor. In ut augue in felis posuere pellentesque.

Maecenas tristique non tortor eu accumsan. Duis sit amet maximus massa. Sed eu ipsum et metus iaculis tincidunt sed a enim. Curabitur at nunc tempus, tempor augue eget, iaculis ligula. Proin eget massa non arcu feugiat ultricies. Suspendisse eleifend nunc consequat dolor sodales, in aliquam lorem pretium. Donec ullamcorper, mi eu feugiat interdum, nibh turpis porttitor odio, ut iaculis ante justo id lectus.
</span>
</div>