CODEWITHSUNDEEP
htmlcsslineboxdiagonal
Saif Tehami
Saif Tehami

Reputation: 11

In css and html, I am trying to create two boxes side by side having two different colors without gap but with a slant at the center

I thought, it would be easy for me. But after trying much I am unable to achieve. Have been trying to create a box having two different colors side by side with equal size. BUT with a diagonal line in the center. To make it clear, I am attaching ab image. enter image description here

I tried this, but it only gives two boxes with a slanted black line at the center.

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
.container { display: flex; width: 100%; height: 200px; overflow: hidden; }
.box { width: 50%; position: relative; }
.box1 { background-color: red; }
.box2 { background-color: blue; }
.divider { width: 200%; height: 200%; position: absolute; background: linear-gradient(135deg, transparent 49.5%, black 49.5%, black 50.5%, transparent 50.5%); top: -100%; left: -100%; }
</style>
</head>
<body>
<div class="container"> <div class="box box1"> <div class="divider"></div> </div> <div class="box box2"> <div class="divider"></div> </div> </div>
</body>
</html>

Upvotes: 1

Views: 50

Answers (1)

Olivia S
Olivia S

Reputation: 11

here’s an example of updating the code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
        .container { 
            display: flex; 
            width: 100%; 
            height: 200px; 
            overflow: hidden; 
        }

    .box { 
        width: 50%;
    }

    .box1 { 
        background-color: red; 
        position: relative;
    }

    .box1::after {
        content: '';
        position: absolute;
        right:-100px;
        top: -10px;
        width: 100px;
        background-color: red;
        height: 400px;
        overflow: hidden;
        transform: rotate(-20deg);
    }

    .box2 { 
        background-color: blue; 
    }

</style>
    </head>
    <body>
        <div class="container"> 
            <div class="box box1"> 
                
            </div> 
            <div class="box box2"> 
                
            </div> 
        </div>
    </body>
</html>

Keep in mind that the values for height, width, right, and top (in .box1::after) are adjusted depending on the height of the parent container (.container).

Upvotes: 0

Related Questions