Question

我正在创建一个部分，该部分的底部为三角形，在元素和剪切路径之前和之后进行处理。下面是该部分的图片。

问题是，在某些设备宽度上，它在底部留有大约1px的空间，在某些宽度上，它在两侧都留有相同的空间。

这是我的代码：

body {
  background-color: #424963;
  padding: 0;
  margin: 0;
}
.stats-section {
  background-color: #1B2235;
  padding: 200px 0;
  position: relative;
}

.bottom-triangle {
  position: absolute;
  height: 150px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.bottom-triangle .triangle {
  position: absolute;
  width: 50%;
  height: 200px;
  background-color: #ED0F0C;
  right: 0;
  bottom: 0;
  z-index: 9;
  clip-path: polygon(0 120px, 100% 0, 100% 100%, 0 100%);
}

.bottom-triangle:after,
.bottom-triangle:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 50.05%;
  background-color: #424963;
  z-index: 9;
}

.bottom-triangle:after {
  right: 0;
  clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
}

.bottom-triangle:before {
  left: 0;
  clip-path: polygon(0 0, 100% 70px, 100% 100%, 0 100%);
}

<body>
    <section class="stats-section clipped-top">
        <div class="bottom-triangle">
            <div class="triangle"></div>
        </div>
        <div class="container">
            <div class="section-content">

                <div class="row">
                    <div class="col-md-10">
                        <div class="row">
                            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">30</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Years in Business</p>
                            </div>
                            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">1330</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Projects Completed</p>
                            </div>
                            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">330</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Families Supported</p>
                            </div>
                            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">660</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Jobs Created</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

我尝试了很少的解决方案并在网上搜索，但是找不到原因或解决方案。您可以在图像的底部看到一条细线，或者在下面的小提琴链接中，可以通过调整浏览器窗口的大小来查看问题：

https://jsfiddle.net/vishal157/fj91n8tq/

如何在带有背景图像和渐变叠加且阴影逐渐显现的部分上实现相同的三角形？如下图所示：

Answer 1

我会用更少的代码来做不同的事情：

body {
  background-color: #424963!important;
}
.stats-section {
  background:
   linear-gradient(to bottom right,transparent 49.8%,#ED0F0C 50%)
   bottom right/
   50% 150px  /* adjust the 150px to control the red triangle */
   no-repeat,
   #1B2235; /* you can replace the color with an image */
  padding: 100px 0 200px;
  /* adjust the 110px to control the main triangle */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 110px),50% 100%, 0 calc(100% - 110px));
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<section class="stats-section clipped-top mb-5 text-white">
        <div class="container">
            <div class="section-content">

                <div class="row">
                    <div class="col-md-10">
                        <div class="row">
                            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">30</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Years in Business</p>
                            </div>
                            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">1330</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Projects Completed</p>
                            </div>
                            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">330</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Families Supported</p>
                            </div>
                            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">660</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Jobs Created</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

使用更少的代码仍然可以更好地支持另一个想法：

body {
  background-color: #424963!important;
}

.stats-section {
  position: relative;
  z-index:0;
  padding: 100px 0 200px;
}

.stats-section::before,
.stats-section::after {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #1B2235;
}

.stats-section::before {
  left: 0;
  transform-origin: right;
  transform: skewY(8deg);
}

.stats-section::after {
  right: 0;
  transform-origin: left;
  transform: skewY(-8deg);
  background: 
    linear-gradient(to bottom right, transparent 49.8%, #ED0F0C 50%) 
    bottom right/100% 50px 
    no-repeat #1B2235;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<section class="stats-section clipped-top mb-5 text-white">
  <div class="container">
    <div class="section-content">

      <div class="row">
        <div class="col-md-10">
          <div class="row">
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">30</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Years in Business</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">1330</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Projects Completed</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">330</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Families Supported</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">660</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Jobs Created</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

并以图片作为背景：

body {
  background-color: #424963!important;
}

.stats-section {
  position: relative;
  z-index:0;
  padding: 100px 0 200px;
}

.stats-section > span {
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #1B2235;
  overflow:hidden;
}
.stats-section > span::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://picsum.photos/id/1015/800/800) left/200% auto;
  transform-origin:inherit;
  transform: skewY(-8deg);
}
.stats-section > span:nth-of-type(2)::before {
  transform: skewY(8deg);
  background-position:right;
  background:
    linear-gradient(to bottom right, transparent 49.8%, #ED0F0C 50%) 
     bottom right/100% 10vw no-repeat,
    url(https://picsum.photos/id/1015/800/800) right/200% auto;
}
.stats-section > span:nth-of-type(1){
  left: 0;
  transform-origin: right;
  transform: skewY(8deg);
}

.stats-section > span:nth-of-type(2) {
  right: 0;
  transform-origin: left;
  transform: skewY(-8deg);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<section class="stats-section clipped-top mb-5 text-white">
  <span></span>
  <span></span>
  <div class="container">
    <div class="section-content">

      <div class="row">
        <div class="col-md-10">
          <div class="row">
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">30</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Years in Business</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">1330</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Projects Completed</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">330</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Families Supported</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">660</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Jobs Created</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>

Answer 2

您只能使用如下所示的线性渐变来完成此操作。

.stats-section {
  background-color: #1B2235;
  padding: 100px 0 200px;
  position: relative;
}

.bottom-triangle {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  
  /* you can change these variables */
  --bottom-height: 100px;
  --arrow-height: 100px;
  --red-height: 150px;
  --c1: #424963;
  --c2: #ED0F0C;
  
  height: calc(var(--bottom-height) + var(--red-height));
  background:
    linear-gradient(to top left, var(--c1) 49.5%, transparent 50% 100%) 100% calc(100% - var(--bottom-height))/50% var(--arrow-height) no-repeat,
    linear-gradient(to top left, var(--c2) 49.5%, transparent 50% 100%) 100% calc(100% - var(--bottom-height))/50% var(--red-height) no-repeat,
    linear-gradient(to top right, var(--c1) 49.5%, transparent 50% 100%) 0 calc(100% - var(--bottom-height))/50% var(--arrow-height) no-repeat,
    linear-gradient(var(--c1), var(--c1)) 0 100%/ 100% var(--bottom-height) no-repeat;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<section class="stats-section text-white">
  <div class="bottom-triangle">
    <div class="triangle"></div>
  </div>
  <div class="container">
    <div class="section-content">

      <div class="row">
        <div class="col-md-10">
          <div class="row">
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">30</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Years in Business</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">1330</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Projects Completed</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">330</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Families Supported</p>
            </div>
            <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
              <h2 class="mb-0 stat-number">660</h2>
              <p class="mb-0 stat-desc font-zilla-medium">Jobs Created</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

如何删除底部伪元素之前和之后的空间？

2 个答案: