卡片之间的条像闪电一样

Question

你觉得我怎么才能把竖条放得像闪电一样？例如

​

​

<div class="row d-flex justify-content-center">
      <div class="col-md-3">
        <div class="info">
          <div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
            <i class="ni ni-settings-gear-65"></i>
          </div>
          <i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
          <h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
          <br>
          <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
          <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
          <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
          <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
          <h6 href="javascript:;" id="footerText">**
            <i class="ni ni-bold-right text-primary"></i>
          </h6>
        </div>
      </div>
      <hr id="verticalHr">

我有三张这样的卡片，在那一小时，我怎么才能让它们像闪电一样呢？

Answer 1

您可以做的是在div上创建一个紧跟在hr元素后面的伪元素，并使用CSS使其与div一样高(假设这是所需的)，并使用任何背景/图像/渐变和任何您想要的宽度。我认为这比尝试将人力资源本身设计和定位为垂直和正确的位置要容易得多。

​

.row {
  margin: 2vmin; /* just for this demo */
}

hr {
  display: none;
}

hr + div {
  position: relative;
}

hr + div:before {
  height: 100%;
  width: 2vmin;
  background-color: black;
  background-image: url(https://ahweb.org.uk/lightning.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  content: '';
  position: absolute;
  top: 0;
  left: -2vmin;
}

<div class="row d-flex justify-content-center">
  <div class="col-md-3">
    <div class="info">
      <div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
        <i class="ni ni-settings-gear-65"></i>
      </div>
      <i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
      <h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
      <br>
      <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
      <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
      <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
      <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
      <h6 href="javascript:;" id="footerText">**
        <i class="ni ni-bold-right text-primary"></i>
      </h6>
    </div>
  </div>
  <hr id="verticalHr">
  <div class="col-md-3">
    <div class="info">
      <div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
        <i class="ni ni-settings-gear-65"></i>
      </div>
      <i class="fa fa-trophy d-flex justify-content-center" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i>
      <h6 class="info-title text-uppercase d-flex justify-content-center"><strong>Bronze</strong></h6>
      <br>
      <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> A</p>
      <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
      <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> </p>
      <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i></p>
      <h6 href="javascript:;" id="footerText">**
        <i class="ni ni-bold-right text-primary"></i>
      </h6>
    </div>
  </div>
</div>

​

我猜这里的尺寸，所以很明显，改变它们以适应闪电的图像只是网络上的一个随机图像。如果你愿意，你可以放入你自己的图像中或者使用css来绘制线条来创建一个螺栓。

Answer 2

您可以在每张卡片之间放置一个闪电的SVG图像。由于您为每张卡使用了3列，因此还剩下3列( Bootstrap提供的12列)。你可以用其中的两根柱子做闪电。

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<style>
  .bolt {
      padding-top: 5rem;
      height: 16rem;
      text-align: center;
  }

  .bolt svg {
    height: 100%;
  }
</style>

<div class="container mt-5">
    <div class="row d-flex justify-content-center">
        <div class="col-md-3">
            <div class="info">
                <div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
                    <i class="ni ni-settings-gear-65"></i>
                </div>
                <p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#FFD700;" aria-hidden="true"></i></p>
                <h6 class="info-title text-uppercase font-weight-bold text-center">Gold</h6>
                <br>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> U. Bolt (JAM)</p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
                <h6 href="javascript:;" id="footerText">**
                    <i class="ni ni-bold-right text-primary"></i>
                </h6>
            </div>
        </div>
        
        <div class="col-1 bolt d-none d-md-block">
            <svg version="1.1" viewBox="0 0 2 19">
                <path d="M 2 0 L 1 9 L 2 9 L 0 19 L 1 10 L 0 10 Z" fill="#ff0000" />
            </svg>
        </div>

        <div class="col-md-3">
            <div class="info">
                <div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
                    <i class="ni ni-settings-gear-65"></i>
                </div>
                <p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#C0C0C0;" aria-hidden="true"></i></p>
                <h6 class="info-title text-uppercase font-weight-bold text-center">Silver</h6>
                <br>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> Y. Blake (JAM)</p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> R. Thompson (TRI)</p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> F. Obikwelu (POR)</p>
                <h6 href="javascript:;" id="footerText">**
                    <i class="ni ni-bold-right text-primary"></i>
                </h6>
            </div>
        </div>

        <div class="col-1 bolt d-none d-md-block">
            <svg version="1.1" viewBox="0 0 2 19">
                <path d="M 2 0 L 1 9 L 2 9 L 0 19 L 1 10 L 0 10 Z" fill="#ff0000" />
            </svg>
        </div>

        <div class="col-md-3">
            <div class="info">
                <div class="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
                    <i class="ni ni-settings-gear-65"></i>
                </div>
                <p class="text-center mb-0"><i class="fa fa-trophy" id="sizeIcon" style="color:#CD7F32;" aria-hidden="true"></i></p>
                <h6 class="info-title text-uppercase font-weight-bold text-center">Bronze</h6>
                <br>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"> De Grasse (CAN)</i></p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> J. Gatlin (USA)</p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> W. Dix (USA)</p>
                <p class="description opacity-8"><i class="fa fa-check" aria-hidden="true"></i> M. Greene (USA)</p>
                <h6 href="javascript:;" id="footerText">**
                    <i class="ni ni-bold-right text-primary"></i>
                </h6>
            </div>
        </div>
    </div>
</div>

​