代码之家  ›  专栏  ›  技术社区  ›  userjmillohara

如何在CSS和HTML背景/div中绘制对角线和不规则线?

  •  0
  • userjmillohara  · 技术社区  · 8 年前

    到目前为止,我已经在许多网站上看到了这一点,但我不知道它是如何做到的。我想知道怎么做 here, in this image, which is a screenshot of the digitalocean website, 背景中的对角线是否已绘制?我知道如何将div的背景设置为渐变色或简单的统一颜色,但你是如何做到这一点的?

    还有 two sections separated like so . 所以,两个div之间的间隔不是一条直线,而是一个凹凸。我不知道这样的事情是如何从编码的角度实现的,也不知道我应该在谷歌上搜索什么来了解更多。(我甚至不确定这两件事是否需要类似的解决方案)非常感谢您的理解。

    1 回复  |  直到 8 年前
        1
  •  1
  •   user4676340 user4676340    8 年前

    我没有访问imgur的权限,但我想我知道你在问什么。像这样的?

    .diag {
      background-image: linear-gradient(135deg, #fff 0, #fff 281px, #ddd 282px, #fff 283px, #fff 566px);
      background-size: 400px, 400px;
      height: 400px;
      width: 400px;
    }
    <div class="diag"></div>

    关于“bump”,我想一个简单的SVG可以做到这一点。但你不能用非图像背景属性来做,我敢肯定!