Question

我正在尝试编写一些CSS代码，以便在BODY标签的左侧和右侧放置垂直的锯齿形线。

我希望它看起来像一张票...像这样的东西从左至右从页面顶部到底部：https://roalddahl.fandom.com/wiki/Golden_Ticket?file=Golden_Ticket.png

我发现这个问题与左边的之字形的要求有关，但是当我在BODY上使用时，它对我来说无法正常工作：zigzag border in css left side

body {
  background-color: #c5ac5a;
  background: linear-gradient(-137deg, #c5ac5a 6px, transparent 0) 0 5px, linear-gradient(320deg, #c5ac5a 5px, #fff 0) 0 5px;
  background-position: left;
  background-repeat: repeat-y;
  background-size:10px 10px;
}

<body>
<h1>The Title</h1>
</body>

编辑：我希望整个背景为＃c5ac5a，并且两侧均为垂直的锯齿形。

Answer 1

使用:before和:after实现目标。（我也将列更改为使用flex，但这对于当前的问题不是必需的）。请参见下面提供的代码段：

body {
  background: white;
}

.ticket {
  background-color: #c5ac5a;
  position: relative;
  padding: 10px;
}

.ticket:before,
.ticket:after {
  top: 0;
  left: -10px;
  content: '';
  width: 10px;
  height: 100%;
  position: absolute;
  background-color: #c5ac5a;
  background: linear-gradient(-137deg, #c5ac5a 6px, transparent 0) 0 5px, linear-gradient(320deg, #c5ac5a 5px, transparent 0) 0 5px;
  background-position: left;
  background-repeat: repeat-y;
  background-size:10px 10px;
}

.ticket:after {
  left: auto;
  right: -10px;
  top: 0;
  transform: scaleX(-1);
}

.hr {
  border-bottom: 2px solid black;
}

h1 {
  text-align: center;
  font-family: Times, serif;
  font-size:40px;
}

.column {
  text-align:center;
  flex: 1 1 auto;
  padding: 10px 0;
}

.row {
  display: flex;
}

.ticket__footer {
  font-size: 12px;
  text-align: center;
  padding-top: 10px;
}

.bold {
  font-weight:bold;
}

<div class="ticket">
    <div class="hr">
    </div>
  <div class="title">
  <h1>
  GOLDEN TICKET
  </h1>
  </div>
  
  <div class="hr">
  </div>
  
  <div class="row">
    <div class="column">
    <span class="small">DATE</span></br>
    <span class="bold">FEB. 1</span>
  </div>
  <div class="column">
    <span class="small">TIME</span></br>
    <span class="bold">10 A.M (SHARP)</span>
  </div>
  <div class="column">
    <span class="small">PLACE</span></br>
    <span class="bold">RIGHT HERE</span>
  </div>
  </div>

  <div class="hr">
  </div>

  <div class="ticket__footer">
  THIS GOLDEN TICKET ENSURES ADMITTANCE
  </div>
  </div>

身体左右两侧的垂直锯齿形boder

1 个答案: