Question

我已经对此进行了编码，但我只是想知道是否有更简单的方法可以做到这一点？我的方式看起来有点“毛躁”，特别是因为我需要将内容放在div的中间。

到目前为止，这是我的代码：

＆＃13;

body {
  padding-top: 20px;
}
#line {
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: white #fafafa transparent transparent;
  transform: scale(1.0001);
}
.wrap {
  background-color: #fafafa;
  text-align: center;
  padding-bottom: 100px;
}
hr {
  width: 100px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="line"></div>
<div class="wrap">
  <h2>Title</h2>
  <hr>
  <p>Text goes here</p>
  <a href="#" class="btn btn-primary rounded-0 border-0">Click Here<a>
</div>

＆＃13;

但是，我不想使用SVG。我试图用CSS来实现这个目标。

Answer 1

您可以使用带有边框的div或具有设置高度的div本身，然后使用CSS变换进行旋转，即transform: rotate(7deg);

https://www.w3schools.com/cssref/css3_pr_transform.asp

您的解决方案很棒，并且有效地允许div覆盖页面。

Answer 2

我不会仅仅为了那个效果而使用一个元素。这是设计，所以将它与标记分开并将其保存在CSS中将是理想的。您可以使用伪元素。你可以创建一个宽的并使用transform: rotate()来创建一条对角线。

＆＃13;

body {
  padding-top: 20px;
}
.wrap:before {
  content: '';
  position: absolute;
  top: -50px;
  left: -100%;
  right: -100%;
  bottom: 50%;
  background: #fafafa;
  transform: rotate(-2.5deg);
  z-index: -1;
}
.wrap {
  background-color: #fafafa;
  text-align: center;
  padding-bottom: 100px;
  margin-top: 100px;
  position: relative;
}
hr {
  width: 100px;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="wrap">
  <h2>Title</h2>
  <hr>
  <p>Text goes here</p>
  <a href="#" class="btn btn-primary rounded-0 border-0">Click Here<a>
</div>

＆＃13;

div顶部的对角线

2 个答案: