Question

我正试图将两个倾斜的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>

Answer 1

你可能想要这样的东西：

<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>

如何使用CSS并排放置两个倾斜的div？

1 个答案: