Question

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

double diagonal top border, triangle shaped

现在一直在网上搜索如何实现这一目标，而我的第一个就是使用::before。然而，如果没有它被定位为绝对会影响整个页面，我就无法工作。

更新这是我的代码，我试图实现这样的事情

＆＃13;

.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%;
  }
}

＆＃13;

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

＆＃13;

注意：它不会在这里工作，但这是我得到的结果result

Answer 1

根据你的div大小只需要css和一点点调整你可以创建这样的东西：

.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

您可以使用 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 3

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

  border-left: 60px solid green;
}

Answer 4

这样的东西？

＆＃13;

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%;
}

＆＃13;

<div></div>

＆＃13;

Answer 5

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

使用此功能，您可以创建0％到15％的渐变，两端都是白色，然后是15％到100％的渐变，它是完全黑色的。这完全消除了褪色效果，为您提供角度背景。它可能是最有效的方式，因为它只需要一行CSS。

Answer 6

对我来说，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>

CSS对角线div背景

6 个答案: