I am in need of assistance to create a website top bar similar to the image provided at this link: https://i.sstatic.net/wfc1w.jpg
The first column should display color-1, while the second column should showcase color-2. I want an angled design between these columns.
My attempt so far looks like this:
Below is the HTML code I have used:
<section class="topbar">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 left">
<p>Welcome to Remote Auto Diagnostics</p>
</div>
<div class="col-12 col-md-6 right">
</div>
</div>
</div>
</section>
Here is my CSS code:
.topbar {
background: #f41004;
padding: 5px;
color: #fff;
line-height: 30px;
}
.topbar .left {
background: #00f;
}
.topbar .left:after {
content: "";
display: block;
width: 100px;
height: 200%;
background: blue;
position: absolute;
right: -20px;
top: -10px;
transform: skew(-45deg);
}
However, the result produced doesn't quite match the desired outcome: https://i.sstatic.net/U4cvm.jpg
There seems to be some padding on the left and right sides due to the container placement, affecting the display of the .topbar background. How can I adjust it so that the .left background color starts directly from the left side?
Interestingly, when using container-fluid instead, the left and right padding disappears, resulting in something like this: