CSS 对角线 div 背景

Question

对于我正在开发的网站，我需要在 div 中包含一些对角线形状的边框。这些是我需要重新创建的主要示例。

双对角线顶部边框，三角形

现在一直在网上搜索如何实现这一点，我的第一个想法也是使用 ::before 。但是，如果它不被绝对定位，我就无法让它工作，这会弄乱整个页面。

这是我的代码，我试图实现这样的目标：

 .slider-container{
  background-color: $blue;
  width: 100%;
  overflow: hidden;
  position: relative;
  .col-md-3{
    img{
      padding: 40px;
      width: 100%;
      max-width: 400px;
      margin: auto;
    }
  }
  &::before {
    background: red;
    bottom: 100%;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    transform-origin: 100% 100%;
    transform: rotate(-15deg);
    width: 150%;
  }
}

 <section id="slider">
    <div class="container-fluid">
        <div class="row slider-container">
            <div class="col-md-3">
                <p>imgae 1</p>
            </div>
            <div class="col-md-3">
                <p>imgae 2</p>
            </div>
            <div class="col-md-3">
                <p>imgae 3</p>
            </div>
            <div class="col-md-3">
                <p>imgae 4</p>
            </div>
        </div>
    </div>
</section>

注意：它在这里不起作用，但这是我得到的 结果

原文由 Gurbii 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需使用 css 并根据您的 div 大小进行一些调整，您就可以创建如下内容：

 .myclass {
width: 100px;
height: 100px;
background: linear-gradient(45deg, black 0%, black 26%, transparent 26%), linear-gradient(-45deg, black 0%, black 27%, transparent 27%)
}

.myclass2 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, blue 0%, blue 27%, transparent 27%), linear-gradient(45deg, blue 0%, blue 26%, red 26%)
}

 With transparency:
<div class="myclass">My content here</div>
<br/>
Not as easy with transparent:
<div class="myclass2">My content here</div>

编辑：刚刚在 chrome 中对此进行了测试，您可能需要针对旧版/其他浏览器的特殊线性渐变。

原文由 Morfium 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

实现此目的的最简单方法可能是使用背景图像，尽管在较小的设备上效果可能会不一致。出于这个原因，您可能需要考虑使用 hard-stop 渐变。

 .grad {
  background: lightblue; /* For browsers that don't support gradients */
  background: -webkit-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: -o-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: -moz-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  width: 100%;
  padding: 20px;
}

 <div class="grad">
  <h1>Hard-stop gradient</h1>
  <p>Using this type of gradient, you can create an angled background without using a background image.</p>
</div>

使用它，您可以创建一个从 0% 到 15% 的渐变，两端都是白色的，然后是一个从 15% 到 100% 的渐变，它是全黑的。这完全消除了褪色效果，为您提供倾斜的背景。这可能也是最有效的方法，因为它只需要一行 CSS。

原文由 natejms 发布，翻译遵循 CC BY-SA 3.0 许可协议