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>

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

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 中对此进行了测试，对于较旧的/其他浏览器，您可能需要特殊的线性渐变。

Answer 2

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

 .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。

Answer 3

像这样的东西？

 div { background: yellow; height: 150px; overflow: hidden; position: relative; width: 300px; } div::before { background: red; bottom: 100%; content: ''; display: block; height: 100%; position: absolute; right: 0; transform-origin: 100% 100%; transform: rotate(-15deg); width: 150%; }

 <div></div>

Answer 4

对我来说， linear-gradient并不平滑......我建议使用clip-path或svg ：

svg {
  display: block;
  width: 100%;
  height: 55px;      
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" fill="white" />
</svg>

Answer 5

您可以使用clip-path 。

 body { margin: 0; padding: 0; color: #ffffff; } .wrapper { min-height: 100vh; min-width: 100vw; max-width: 100vw; width: 100vw; background-color: red; } .bg { min-height: 100vh; min-width: 100vw; background-color: blue; clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%); }

 <div class="wrapper"> <div class="bg"></div> </div>

Answer 6

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid green;
  border-bottom: 60px solid transparent;

  border-left: 60px solid green;
}