CSS 带有渐变的形状紧邻容器

Question

我正在尝试为我们正在构建的网站组合特定的设计。头部上方需要一个平行四边形，容器右侧需要一个梯形，如下所示。

我已经设法在容器上方添加了平行四边形，但我很难将元素放在容器的右侧。以下显示了我所做的。

HTML

<div class="container">
  <div class="row">
    <div class="col">
      Content Here
    </div>
  </div>
</div>

CSS

.container {
  width: 700px;
}

.container:before {
  content:'';
    width: 100%;
    height: 30px;
    transform: skew(45deg);
    background: #254896;
    background: linear-gradient(90deg, #254896, #2c2b5b 100%);
    display: block;
}

.row {
  background: #f8f9fa;

}

.row:before {
    content:'';
    width: 100%;
    height: 0;
    border-image-source: linear-gradient(90deg, #FF0000, #940202);
    border-image-slice: 1;
    border-top: 30px solid red;
  border-left: 30px solid transparent;
    position: absolute;
    left: 800px;
    top: 30px;
}

.col {
  background-color: #ddd;
  padding: 10px;
}

https://jsfiddle.net/scarrott/vgtpna14/

我遇到的问题是：

无论屏幕大小如何，让红色形状整齐地位于容器的右侧。
正在对梯形形状进行渐变填充。如果我使用 border-image-source 它会使形状成为矩形。

如有任何帮助，我们将不胜感激。

Answer 1

这是一个使用多重背景的想法。我使用 400px 而不是 700px 以更好地查看代码段

body {
  overflow-x: hidden;
}

.container {
  --w:400px;
  max-width: var(--w);
  position: relative;
  margin: 40px auto;
}

.container:before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: calc(50vw + var(--w)/2);
  min-width: 100%;
  height: 40px;
  transform: skew(45deg);
  transform-origin: top;
  background: 
    linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%, 
    linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
  background-repeat: no-repeat;
}

.row {
  background: #f8f9fa;
}

.col {
  padding: 10px;
}

<div class="container">
  <div class="row">
    <div class="col">
      Content Here
    </div>
  </div>
</div>

clip-path的另一个想法：

body {
  overflow-x: hidden;
}

.container {
  --w:400px;
  max-width: var(--w);
  position: relative;
  margin: 40px auto;
}

.container:before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: calc(50vw + var(--w)/2);
  min-width: 100%;
  height: 40px;
  clip-path:polygon(0 0, calc(var(--w) - 20px) 0,var(--w) 50%,100% 50%,100% 100%,calc(var(--w) + 20px) 100%,var(--w) 50%, 20px 50%);
  background: 
    linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%, 
    linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
  background-repeat: no-repeat;
}

.row {
  background: #f8f9fa;
}

.col {
  padding: 10px;
}

<div class="container">
  <div class="row">
    <div class="col">
      Content Here
    </div>
  </div>
</div>

包括bootstrap

body {
  overflow-x: hidden;
}

.container {
  --w: 540px;
  position: relative;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .container {
    --w: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    --w: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    --w: 1140px;
  }
}

.container:before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: calc(50vw + var(--w)/2);
  min-width: 100%;
  height: 40px;
  clip-path: polygon(0 0, calc(var(--w) - 20px) 0, var(--w) 50%, 100% 50%, 100% 100%, calc(var(--w) + 20px) 100%, var(--w) 50%, 20px 50%);
  background: 
    linear-gradient(90deg, #254896, #2c2b5b 100%) top left/var(--w) 50%, 
    linear-gradient(90deg, #FF0000, #940202) bottom right /calc(100% - var(--w)) 50%;
  background-repeat: no-repeat;
}

.row {
  background: #f8f9fa;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col">
      Content Here
    </div>
  </div>
</div>

Answer 2

另一种方法是让容器内的 2 个平行四边形形状 div 具有指定的百分比。

    .row::before {
      content: '';
        width: calc(70% - 14px);
        height: 30px;
        transform: skew(45deg);
        background: #254896;
        background: linear-gradient(90deg, #254896, #2c2b5b 100%);
    }

    .row::after {
        content: '';
        width: calc(30% - 14px);
        height: 30px;
        position: absolute;
        right: 0;
        top: 30px;            
        transform: skew(45deg);
        background: red;
        background: linear-gradient(90deg, #FF0000, #940202);
    }

jsFiddle

CSS 带有渐变的形状紧邻容器

CSS Shape with Gradient Next Adjacent to Container

html

css

linear-gradients

bootstrap-4