个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 09:21:12 27 4
gpt4 key购买 nike

我正在创建一个在底部有三 Angular 形形状的部分，我正在使用元素和剪辑路径之后和之前。下面是该部分的图像。
enter image description here
问题是，在某些设备宽度上，它在底部留下大约 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>

我尝试了一些解决方案并在网上搜索，但找不到原因或解决方案。您可以在图像底部看到一条细线，否则下面是 fiddle 链接，您可以通过调整浏览器窗口大小来查看问题:
https://jsfiddle.net/vishal157/fj91n8tq/
如何在带有背景图像和渐变叠加的部分实现相同的三 Angular 形，而小阴影则隐约可见？如下图所示:
enter image description here

最佳答案

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

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>

关于html - 如何删除底部伪元素之后和之前的空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63102460/

27 4 0
文章推荐： r - 使用循环或应用覆盖多个字符串变量
文章推荐： 矩阵突触的 reCaptcha 配置
文章推荐： haskell - 递归类型是haskell，不重复相同的构造函数
文章推荐： javascript - 无论行数和列数如何，都可以将网格放入 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com