html - 拟合跨度渐变到背景颜色的预期大小

Question

我正在做一个面试元素，尝试使用 html、css 和 bootstrap 重新创建 stripe.com 网站。然而，经过几周的尝试，我们还没有弄清楚如何让跨度与 stripe 网站上的内容相匹配。

这是我应该拥有的屏幕截图:

这是我目前拥有的:

我以前从未使用 span 来构建不同颜色的背景，所以这对我来说是一个挑战。我在不同的点出现了所有跨度，但是当我这样做时，我无法使它们的大小和/或在正确的位置。如何使这些跨度成为它们所在的 div 大小的 1/3，以及如何将它们定位在正确的位置？

body {
  background-color: #f6f9fc;
  font-family: Camphor, Open Sans, Segoe UI, sans-serif;
}

nav {
  z-index: 1;
}

.navbar-brand {
  font-size: 25px;
  /* original CSS says 62.5% */
  /* height: 25;
    width: 62;
    font-size: 62.5%; */
  font-weight: bold;
  font-style: bold;
  margin-right: 220px;
}

.nav-link {
  font-size: 17px;
  padding: 20px 20px;
  color: rgb(255, 255, 255, 0);
  font-weight: 500;
  font-family: arial;
  margin-right: 50px;
  padding-top: 20px;
  overflow: visible;
}

#pricing {
  margin-right: 100px;
}

.navbar {
  height: 50px;
  padding: auto 0;
}

#stripes {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform: skewY(-12deg);
  transform: skewY(-12deg);
  -webkit-transform-origin: 0;
  transform-origin: 0;
  background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%);
  position: relative;
  height: 760px;
}

#stripes span {
  height: 40px;
  z-index: -1;
  position: relative;
  overflow: hidden;
}

#stripeSpan1 {
  width: 33.33333%;
  left: -16.66666%;
  top: 40px;
  background: #4c29ff;
}

#stripeSpan2 {
  width: 33.333333%;
  right: auto;
  left: 16.66666%;
  bottom: auto;
  background: #2be7ff;
}

#stripeSpan3 {
  width: 33.333333%;
  bottom: auto;
  left: 50%;
  right: auto;
  background: #a1ffc8;
}

#stripeSpan4 {
  background: #25ddf5;
  top: 380px;
  right: -16.66666%;
  width: calc(100% / 3);
}

#stripeSpan5 {
  width: calc(100% / 3);
  bottom: 0;
  background: #1fa2ff;
}

<div class="container">
        <nav class="navbar navbar-dark navbar-expand-lg ">
            <div class='d-flex align-items-center'>
                <a class="navbar-brand " href="#">stripe</a>


                <ul class="navbar-nav align-items-center">
                    <li class="nav-item ">
                        <a class="nav-link text-light " href="#">Products</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#">Developers</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light" href="#">Company</a>
                    </li>
                    <li class="nav-item" id="pricing">
                        <a class="nav-link text-light" href="#">Pricing</a>
                    </li>
                    <li class="nav-item float-right">
                        <a class="nav-link text-light" href="#">Support</a>

                    <li class="nav-item float-right">
                        <a class="nav-link text-light no-wrap" href="#">Sign In →</a>
                    </li>
                    </li>

                </ul>
            </div>

        </nav>
    </div>

    <div class="header">
        <div id="stripes" aria-hidden="true">
            <span id="stripeSpan1"></span>
            <span id="stripeSpan2"></span>
            <span id="stripeSpan3"></span>
            <span id="stripeSpan4"></span>
            <span id="stripeSpan5"></span>
        </div>
        <div class="container-lg header-text">
            <span class="badge badge-success">NEW</span>
            <p class="float-right text-light">
                Itroducing the Corporate Card
            </p>
            <h2 class="text-light">
                The new standard in online payments
            </h2>
            <p class="text-light">
                Stripe is the best software platform for running an internet business. We handle billions of dollars
                every year
                for
                forward-thinking businesses around the world.
            </p>
        </div>
    </div>

Answer 1

可以考虑多背景来近似。只需找到正确的值即可获得良好的结果:

.stripe {
  height:300px;
  background: 
    /* Color                         position     / width height */
    linear-gradient(#25dbf3,#25dbf3) center right / 30%   70px, 
   
    linear-gradient(#1fa2ff,#1fa2ff) bottom left  / 40%   70px,
    
    linear-gradient(#5533ff,#5533ff) top left     / 30%   70px,
    linear-gradient(#4553ff,#4553ff) top left     / 60%   70px,
    linear-gradient(#4f40ff,#4f40ff) top left     / 100%  70px,
    /* main background*/
    linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%);
  background-repeat:no-repeat;
  transform:skewY(-10deg);
  transform-origin:left;
}

<div class="stripe">

</div>