html - 如何增加一侧div的高度？

Question

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

标签： htmlcss

Answer 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>