html - 带有底部边框的倾斜 CSS 背景。

Question

我正在尝试创建如下所示的 CSS 背景:

我已经能够创建形状，但不知道如何添加底部边框，我开始认为我的方法可能是问题所在。

到目前为止，我有以下 CSS:

#top-background-flag {
  border-top: 2px solid #C2C2C2;
  background: linear-gradient(
    to bottom right,
    #5DCAD3 50%,
    transparent 50.5%
  )
  no-repeat bottom, /* bottom part */
  linear-gradient(100deg, #5DCAD3, #5DCAD3) no-repeat top;
  /* top portion */
  padding-bottom: 3.5rem;
  border-bottom: 2px solid #C2C2C2;
  background-size: 100% 3rem, 100% calc(100% - 3rem)
}

和 HTML:

<div id=top-background-flag>
  A fun title
</div>

和一支密码笔:https://codepen.io/arel/pen/PKXGmd

我现在的问题是底部边框是一条水平线，我不知道如何让它跟随盒子的 Angular 。

这是我目前所拥有的:

Answer 1

尝试使用线性渐变可能不是这里的最佳解决方案。

通过一些 CSS 转换附加一个对象，一些明智的分层将完成您想要的，并且如果您以后想要更改 Angular ，则需要调整的属性会更少。

#top-background-flag {
  border-top: 2px solid #C2C2C2; /* top border on the parent */
  position: relative;
  padding-bottom: 3.5rem;
  overflow: hidden;
}

#top-background-flag:before {
  background-color: #5DCAD3;
  transform: skewy(-4deg); /* angle you want */
  transform-origin: bottom left;
  border-bottom: 2px solid #C2C2C2; /* bottom border skews with the object */
  content: ' ';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
  bottom: 0;
}

这是一个working example一起玩