CSS 颜色部分呈对 Angular 线倾斜

Question

是否有可能完成对 Angular 线笔画，在任何一侧都有一点偏移。我已经看到使用 css linear-gradient 实现的变体，但我需要一些稍微不同的东西。我不知道如何用语言准确描述我的需求。我会使用图片。

我试过使用渐变:

.diagonal{
  background-color: #34ADFF;
  background-image: linear-gradient(to right top, whitesmoke 50%, #34ADFF 50%);
  height: 300px;
}

<div class="diagonal">
</div>

这就是我走了多远。我正在考虑玩 child div，但我还不确定。

有什么想法吗？

我不想使用图像，我只想使用 CSS。

Answer 1

您可以尝试为 linear-gradient 使用单独的 div

.diagonal-top {
    background-image: linear-gradient(to left top, whitesmoke 50%, #34ADFF 50%);
    height: 20px;
}
.diagonal-bottom {
    background-image: linear-gradient(to right top, #34ADFF 50%, whitesmoke 50%);
    height: 40px;
}

.header {
  height: 30px;
  background-color: #34ADFF;
}

.footer {
  height: 50px;
  background-color: #34ADFF;
}

.clearfix  {
  height: 30px;
  background-color: whitesmoke;
}

<div class="header"></div>
<div class="diagonal-top"></div>
<div class="clearfix"></div>
<div class="diagonal-bottom"></div>
<div class="footer"></div>