时间戳

首页 > 解决方案 > 如何倾斜带有背景图像的div的底部边框

html - 如何倾斜带有背景图像的div的底部边框

问题描述

我有一个简单的 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);
}

标签： htmlcssborderangle

解决方案

一种解决方案是使用伪元素作为掩码。您可以设置元素的位置和背景颜色，以便看起来我们正在从<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>

推荐阅读