下部の疑似要素の前後のスペースを削除するにはどうすればよいですか？

debugcn 投稿 Dev

Vishal bhatt

下部に三角形のセクションを作成しています。これは、要素とクリップパスの前後で行っています。以下はそのセクションの画像です。

問題は、特定のデバイス幅では、下部に約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/

小さな影が迫っている背景画像とグラデーションオーバーレイを持つセクションで同じ三角形を実現するにはどうすればよいですか？下の画像のように：

アフィフに同行

私はより少ないコードでそれを別の方法で行います：

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]