如何增加一側div的高度？[復制]-有解無憂

這個問題在這里已經有了答案：如何增加一側div的高度？[復制]

uj5u.com熱心網友回復：

您可以clip-path搭配使用padding

.container {
  width: 300px;
  padding: 1rem;
  background: dodgerblue;
  clip-path: polygon(0 1rem, 100% 0, 100% 100%, 0 calc(100% - 1rem));
}

<div class="container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis quos quo dolorum vero cum! Ut, maxime. Vel culpa itaque quae consequatur repellat et quaerat cupiditate? Cum animi inventore odit id.

</div>

uj5u.com熱心網友回復：

“盒子模型”是矩形的。如果你想讓實際的盒子看起來像這樣，你可以用類似的東西圍繞 Y 軸旋轉它transform:perspective(5em) rotateY(-5deg);

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(66deg, rgba(0, 0, 0, 0.15) 2.38%, transparent 2.38%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 52.38%, transparent 52.38%, transparent 100%);
  background-size: 22.99px 51.63px;
}

.trapezoid {
  width: 10em;
  height: 10em;
  border: 1px solid black;
  padding: 1em;
  transform: perspective(5em) rotateY(-5deg);
  `
}

<div class="trapezoid">contents will become rotated too</div>

或者您可以恢復內容的旋轉，以保持它們筆直。

* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(66deg, rgba(0, 0, 0, 0.15) 2.38%, transparent 2.38%, transparent 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 52.38%, transparent 52.38%, transparent 100%);
  background-size: 22.99px 51.63px;
}

.trapezoid {
  width: 10em;
  height: 10em;
  border: 3px solid black;
  transform: perspective(5em) rotateY(-5deg);
}

.trapezoid .content {
  padding: 1em;
  width: 100%;
  height: 100%;
  transform: perspective(5em) rotateY(5deg);
}

<div class="trapezoid">
  <div class="content">contents will become rotated too, unless you rotate them in the oppossite direction</div>
</div>

uj5u.com熱心網友回復：

HTML 中的元素本質上是矩形的。

但是，您可以將元素裁剪為特定形狀，以便不顯示位于多邊形之外的位。

這個片段有兩個引數，最小（左手）高度和最大（右手）高度。然后它在 CSS 中計算在剪切多邊形上設定第一個點的距離：

.shape {
  --minheight: 20vmin;
  --maxheight: 30vmin;
  width: 30vmin;
  height: var(--maxheight);
  background-color: magenta;
  clip-path: polygon(0 calc(var(--maxheight) - var(--minheight)), 100% 0, 100% 100%, 0 100%);
}

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329270.html

標籤：html css

上一篇：BootstrapScrollspy不起作用-缺少什么？

下一篇：如何檢查多個欄位并根據下拉選項更改值