如何增加一侧div的高度？ [复制]答案

【问题标题】：How to increase height of a div in one side? [duplicate]如何增加一侧div的高度？ [复制]
【发布时间】：2021-10-21 08:07:56
【问题描述】：

我想使用 CSS 增加一侧 div 的大小。所以它应该如下图所示。有什么建议吗？

【问题讨论】：

使用max-height和min-height属性，你希望它是恒定高度还是根据内部元素增加？
我想要恒定的高度。使用 maxHeight 和 minHeight，如何增加右侧的高度？
你能添加一些显示元素是如何设置的最小代码吗？ clip-path 可能是您要查找的内容，但从目前提供的信息中无法判断。
我们需要更多解释
尝试使用剪辑路径

标签： html css

【解决方案1】：

您可以将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>

【讨论】：

【解决方案2】：

“盒子模型”是矩形的。如果你想让实际的盒子看起来像这样，你可以用 transform:perspective(5em) rotateY(-5deg); 之类的东西绕 Y 轴旋转它。

* {
  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);
  `
}

&lt;div class="trapezoid"&gt;contents will become rotated too&lt;/div&gt;

或者您可以恢复内容的旋转，以使其保持笔直。

* {
  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>

【讨论】：

【解决方案3】：

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

但是，您可以将元素裁剪为特定形状，这样位于多边形之外的位就不会显示出来。

这个sn-p有两个参数，最小（左手）高度和最大（右手）高度。然后它会在 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%);
}

&lt;div class="shape"&gt;&lt;/div&gt;

【讨论】：

这不适用于边框，如 OP 中所述
正确，这就是我要求插入实际代码的原因，因为我们无法从图表中判断它是否只是描述了元素的形状应该是什么，或者它是否需要实际的边框。看起来答案对于 OP 来说已经足够了，但如果没有（混乱的）小提琴让它看起来好像有一个边界。
对，刚刚注意到评论:)