I want to do a "split" on my website using a "slanting" axe. I try to use it with basic HTML , CSS with transform and rotate but I can't have the correct result. I try to get something looking like this :
But the rotate attribute isn't the best for this
Does another CSS attribut can give me the expected result? Or do you have any good tuto ? Thank.
My current uneffective :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slanting axe</title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="test" class="col-lg-12">
<div id="red" class="col-lg-6">
</div>
<div id="blue" class="col-lg-6">
</div>
</div>
</body>
<script src="Scripts/bootstrap.min.js"></script>
</html>
CSS
#test{
height:500px;
}
#red{
height:500px;
background-color:red;
transform-origin: 50% 50%;
transform: rotate(-30deg);
}
#blue{
height:500px;
background-color:blue;
transform-origin: 50% 50%;
transform: rotate(-30deg);
}
