如何倾斜带有背景图片的 div 的底部边框

Question

我有一个简单的 div 设置为大约整个视口的高度。这个 div 有一张背景图片和一行文字。我想倾斜这个 div 的底部边框，同时保持所有内容默认对齐（水平）。我尝试过变换旋转或倾斜，但这会旋转内容，并且由于旋转会使背景移出 div 的角。有办法吗？

编辑：这是我尝试旋转内容的示例：

<div class="backgrounddiv"><h1 class="title">Title</h1></div>

<style>
.title{
    position:absolute;
    bottom: 20px;
    left:40%;
          transform: translate(-50%, 0);
}
.backgrounddiv{
background:url('media/bgpic.png') scroll no-repeat center/cover;
transform: rotate(10deg);
}

Answer 1

一种解决方案是使用 pseudo-element 作为掩码。您可以设置元素的位置和背景颜色，这样看起来我们正在从 <div> 内容中切出一块。

这是一个示例片段。 运行它看看结果。

将遮罩的 background-color 更改为红色（或任何颜色）并从容器中移除 overflow: hidden 以更好地了解 实际上是什么 正在发生。

.container {
  width: 200px;
  height: 200px;
  background: url("https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
  background-size: cover;
  font-size: 2rem;
  position: relative;
  overflow: hidden;
}

.container::before{
  content: '';
  width: 200%;
  height: 50%;
  position: absolute;
  bottom: -10%;
  left: -50%;
  transform: rotate(-10deg);
  background-color: white;
}

<div class="container">
  <p>Some text</p>
</div>

如何倾斜带有背景图片的 div 的底部边框

How to incline the bottom border of a div with background image

html

css

border

angle