Html 带底部边框的有角度的CSS背景。

我正在尝试创建一个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>

有趣的标题

还有一支密码笔：

我现在的问题是，底部边框是一条水平线，我不知道如何让它跟随长方体的角度

以下是我到目前为止的情况：

---

我不确定这是否是您想要的，但是您可以使用

：after

伪类和

内容
技巧：


正文{
最大宽度：500px；
}
#顶部背景标志{
边框顶部：2个实心#C2C2；
背景：线性梯度(
在右下角，
#5DCAD3 50%，
透明50.5%
)
无重复底部，/*底部零件*/
线性梯度（100度，#5DCAD3，#5DCAD3）无重复顶部；
/*顶部*/
垫底：3.5rem；
边框底部：2个实心#C2C2；
背景尺寸：100%3rem，100%calc（100%-3rem）；
位置：相对位置；
}
#顶部背景标志：后{
内容：''；
边框底部：1px纯红；
边框顶部：1px纯红；
位置：绝对位置；
宽度：100%；
底部：22px；
左：0；
变换：旋转（-5.5度）；
}

有趣的标题
我不确定这是否是您想要的，但您可以使用
：after
伪类和
内容
技巧：


正文{
最大宽度：500px；
}
#顶部背景标志{
边框顶部：2个实心#C2C2；
背景：线性梯度(
在右下角，
#5DCAD3 50%，
透明50.5%
)
无重复底部，/*底部零件*/
线性梯度（100度，#5DCAD3，#5DCAD3）无重复顶部；
/*顶部*/
垫底：3.5rem；
边框底部：2个实心#C2C2；
背景尺寸：100%3rem，100%calc（100%-3rem）；
位置：相对位置；
}
#顶部背景标志：后{
内容：''；
边框底部：1px纯红；
边框顶部：1px纯红；
位置：绝对位置；
宽度：100%；
底部：22px；
左：0；
变换：旋转（-5.5度）；
}

有趣的标题
添加此CSS以伪造底部边框：

#top-background-flag:after {
  content: "";
  background-color: red;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 23px;
  transform: rotate(-5.5deg);
}

这是您的代码笔的工作叉：
添加此CSS以伪造底部边框：

#top-background-flag:after {
  content: "";
  background-color: red;
  height: 2px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 23px;
  transform: rotate(-5.5deg);
}

这里有一个代码笔的工作叉：
尝试使用线性渐变可能不是最好的解决方案

添加一个带有CSS转换的对象一些明智的分层将实现您想要的，并且如果您以后想要更改角度，将有更少的属性需要调整

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

这里有一个可以玩的游戏
尝试使用线性渐变可能不是最好的解决方案

添加一个带有CSS转换的对象一些明智的分层将实现您想要的，并且如果您以后想要更改角度，将有更少的属性需要调整

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

这里有一个游戏
Sorry@Dekel。没注意到你先来了。他只是给了你一个复选标记。他在这里发表评论要求信用，然后他删除了请求的评论。。。你自己决定那是什么means@McHat我只是问为什么被接受的答案是从我的答案中复制出来的。事实上，选择他喜欢的答案是OP的决定，我只是想知道为什么他决定选择从我的答案复制过来的答案。“就这些。”德克尔，我没有抄你的答案。你不是唯一一个有CSS技能的人。你的回答很优雅（也很明显），我个人也很赞同——因为我的建议是一样的。我花时间提供了一个密码笔。也许这就是为什么我的回答比你的要长几分钟的原因。不过，我喜欢这篇文章给了第三个人。很好，真的，考虑到这一点。对不起@Dekel。没注意到你先来了。他只是给了你一个复选标记。他在这里发表评论要求信用，然后他删除了请求的评论。。。你自己决定那是什么means@McHat我只是问为什么被接受的答案是从我的答案中复制出来的。事实上，选择他喜欢的答案是OP的决定，我只是想知道为什么他决定选择从我的答案复制过来的答案。“就这些。”德克尔，我没有抄你的答案。你不是唯一一个有CSS技能的人。你的回答很优雅（也很明显），我个人也很赞同——因为我的建议是一样的。我花时间提供了一个密码笔。也许这就是为什么我的回答比你的要长几分钟的原因。不过，我喜欢这篇文章给了第三个人。很好，真的，考虑到这一点。