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

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

sass css html javascript

userjmillohara · 技术社区 · 8 年前

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

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

1 回复 | 直到 8 年前

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可以做到这一点。但你不能用非图像背景属性来做,我敢肯定!

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前