如何用背景图像倾斜div的底部边框

问题描述

我将一个简单的div设置为大约整个视口的高度。该div具有背景图片和一行文字。我想倾斜此div的底部边框，同时按默认方式（水平）保持所有内容对齐。我已经尝试过使用transform rotation或skew，但是这也会旋转内容，并且由于旋转会导致背景移出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);
}

解决方法

一种解决方案是使用pseudo-element作为 mask 。您可以设置元素的位置和背景颜色，以使我们看起来像从保存您的内容的<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>

angle border html