与容器相邻的带有渐变的CSS形状

问题描述

我正在尝试为我们正在构建的网站汇总特定的设计。标头上方需要有一个平行四边形形状，并且容器右侧需要一个梯形，如下所示。

Header Example

我设法在容器上方添加了平行四边形，但是我正在努力使元素位于容器的右侧。下面显示了我的工作。

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，则会使形状变成矩形。

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4 html linear-gradients