gpt4 book ai didi

html - 如何使用 CSS 并排放置两个倾斜的 div?

转载 作者:行者123 更新时间:2023-11-28 11:11:30 25 4
gpt4 key购买 nike

我正在尝试并排放置两个倾斜的 div。我不知道这在 CSS 中是否可行,但我想做这样的事情:

Example

这只是一个例子。

我正在考虑使用渐变背景,但它不起作用,因为我想做一个具有多个背景的响应式布局。

<style>
body {
background:
linear-gradient(
to top left,
black,
black 50%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,0)
)
top center no-repeat,

linear-gradient(
to top right,
black,
black 50%,
#007bff 50%,
#007bff
)

top center no-repeat;
background-size:40% 200%;
background-color: black;
padding:0;
margin:0 auto;
min-height:100%;
}
}
</style>

最佳答案

你可能想要这样的东西:

<html>
<head>
<style type="text/css">
#bleft {
border-bottom: 500px solid black;
border-right: 500px solid transparent;
float:left;
}

#bright {
border-bottom: 500px solid black;
border-left: 500px solid transparent;
float:right;
}
</style>
</head>

<body>
<div id="bleft"></div>
<div id="bright"></div>
</body>

<body>
<div id="bleft"></div>
<div id="bright"></div>
</body>

关于html - 如何使用 CSS 并排放置两个倾斜的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21960017/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com