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

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

转载作者：行者123 更新时间：2023-12-04 09:21:12

我正在创建一个在底部有三 Angular 形形状的部分，我正在使用元素和剪辑路径之后和之前。下面是该部分的图像。

问题是，在某些设备宽度上，它在底部留下大约 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 形，而小阴影则隐约可见？如下图所示:

最佳答案

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

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/

文章推荐： r - 使用循环或应用覆盖多个字符串变量

文章推荐：矩阵突触的 reCaptcha 配置

文章推荐： haskell - 递归类型是haskell，不重复相同的构造函数

文章推荐： javascript - 无论行数和列数如何，都可以将网格放入 div

http - 伪/冒号标题字段的用途
如标题所示，我正在寻找有关伪/冒号 header 字段用途的一些信息，即我想知道为什么我们有第二种类型的 header 字段... 另外 - 我知道在 http2 中使用伪/冒号 header 字段代
深入解析PHP中的(伪)多线程与多进程
(伪)多线程：借助外力利用WEB服务器本身的多线程来处理，从WEB服务器多次调用我们需要实现多线程的程序。 QUOTE: 我们知道PHP本身是不支持多线程的, 但是我们的WEB服务器是支持多线程的
random - 如何实现(伪)硬件随机数生成器
您如何在 HDL (verilog) 中实现硬件随机数生成器？需要考虑哪些选项？这个问题是在self-answer之后格式。鼓励添加答案和更新。最佳答案正如摩根的回答中所指出的，这只会产生一个
css - 伪 :before outside of div
我写了这个CSS: div { width: 500px; height:150px; margin-left:150px; background: lightblue; } div:
java - 将“伪”时间戳存储到数据库中
这是我要解决的问题：从数据库A读取一个字符串，将该字符串转换为Date对象，将Date对象存储到数据库B中。例）数据库A：从数据库A读入日期字符串“ 2015-03-08 02:00:00”，转换为
c++ - 如何在(伪？)运行时迭代可变参数模板包？
我想创建 std::fscanf() 的 sibling (我知道这是一个 C 函数)。所以，我的界面是这样的: template std::size_t ts_scanf(is, format,
sql - 伪 IF/Case 帮助
运行 PostgreSQL 7.x(是的，我正在升级) 问题: 如果没有返回数据，我有三到四个字段需要设置。正在考虑这样的事情 SELECT CASE WHEN default_fie
javascript - 重复无效的用户输入，直到其有效(伪)
出于某种原因，我很难在 JS 中为我的游戏执行以下代码: 假设我们要求用户在棋盘上移动一个棋子。他们可以做的位置是位置A、位置B或位置C。每个位置一次只能容纳一件。否则为无效移动。第一个用户决定
c++ - 霍夫曼编码 - 伪 EOF
我已经毫无问题地编写了霍夫曼树的代码，但现在我希望在文件和树中添加伪 EOF，以便我知道何时停止从文件中读取。我完全掌握了伪 EOF 的概念。我还了解到没有 ASCII 值 > 255 的字符。我
javascript - 伪 :after class 的切换类
给定一个按钮 ::after 当被触发时，伪 :after 类需要有一个类 search-active 切换，为按钮设置背景颜色 .primary .search:after, .primary
自动编号前的 CSS 伪 - 缩进
我想让第一行的文本像第二行一样缩进 (50px)。有什么办法吗？非常感谢! body{ counter-reset: h2counter; } h1{ counter-reset: h2counter
不同继承之前/之后的 CSS 伪
:before 或 :after 这样的伪元素是否可以从父元素的不同属性继承值？在我的例子中，我有一个第三方组件设置其元素运行时的背景颜色...我需要继承该颜色并将其设置为伪元素的边框颜色。最佳答
matlab - Matlab中并行循环中的不同(伪)随机数
在并行循环中请求随机数总是返回相同的伪随机数。我怎样才能避免这种情况？ % workers initialization: if matlabpool('size') == 0 matlabp
c# - 伪 IPv4 正则表达式
假设最大IP可以包含每个“点”括号中的最大数量999，即999.999.999.999 是最大的可用值。我已经在计算器中检查了正则表达式 ([0-9]+.){3}[0-9]。那么，为什么程序抛出运行
c - 很好的介绍(伪)随机数生成
我对随机数生成的概念非常陌生，我需要为用c编写的工作创建自己的算法（内置的随机数生成器对我不起作用）。有人能给我介绍一个很好的主题，这样我就可以理解这个概念了吗？到目前为止，我所发现的一切似乎都是用
algorithm - 寻找一种算法以(伪)随机顺序吐出一系列数字
假设我有一个数字序列:{n, n+1, n+2, ... n+m} 在不提前存储数字的情况下，我想创建一个函数 f()，给定序列 {1,2,3,...m} 将以随机(或至少伪)的方式吐出原始集合随机)
tcp - 伪 Tcp channel
什么是伪 tcp channel ，如何实现？最佳答案伪 TCP 是一种协议(protocol)，它实现了 TCP 的一些思想，以通过不可靠的、基于数据包的接口(interface)提供可靠的数据
python - 以(伪)随机顺序从大列表中高效地生成元素
我正在尝试展开一些嵌套循环，以牺牲内存为代价(可能)获得更好的性能。在我的场景中，我最终会得到一个包含大约 3 亿个元素(元组)的列表，我必须以(或多或少)随机顺序产生这些元素。在这个数量级上，ra
php - 生成(伪)随机字母数字字符串
如何在 PHP 中生成(伪)随机字母数字字符串，例如:'d79jd8c'？最佳答案首先创建一个包含所有可能字符的字符串: $characters = 'abcdefghijklmnopqrstu
c++ - 如何获得两个(伪)随机但彼此不同的容器迭代器/元素？
我有一段代码可以为玩家生成迷你任务。这很简单，要获得两个不同的点(起点和终点)，我有一个如下所示的算法: std::vector missions; missions.push_bac

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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