Background left and other background right considering bootstrap columns

Question

That's what I'm going to do:

my wish

I have no more idea how I can realize this. Previous approaches were the following:

nav{
    background-image: -webkit-linear-gradient(156deg, #83817e 31%, #504e4b 31%);
    height: 50px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
      <nav>
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                  Left
                </div>
                <div class="col-sm-3">
                  Right
                </div>
            </div>
        </div>
    </nav>

I try with after an before too, but the big problem is the background to the left and the right outside the container considering the columns

Unfortunately the responsive doesn't behave correctly, someone has an idea how to do this elegantly and responsively?

Hi Kamil, welcome to the site. Please include a [mcve] in your post; the code you currently have does not have any actual content. — TylerH, Dec 18 '18 at 19:32
Why -1? Please read the question correctly, i cant find a sloution for this problem, its tricky. Maybe it'd be better to help than push a thumb down. — Kamil, Dec 18 '18 at 19:32
It's not a duplicate, I have a completely different problem. — Kamil, Dec 18 '18 at 19:39
Your question is still unclear. You say it doesn't behave correctly... what exactly isn't 'behaving' and how should it behave? The updated code seems to emulate the desired image to me and is also responsive re: viewport width. — TylerH, Dec 18 '18 at 20:05
I don't know how to describe it better, it's hard to explain. Expand the snippet and you see the problem. The background at the right side must stop at the — Kamil, Dec 18 '18 at 20:09
@Kamil I have looked at the snippet, and it appears to be behaving as you have described in your desired output. Try to explain your problem as if I am blind and cannot learn what your issue is by looking for myself. Are the divs overlapping? Is one div too long and the other too short? Is the slanted edge not smooth? Is the slanted edge slanted too steeply or not steeply enough? Etc. — TylerH, Dec 18 '18 at 20:51
Hi @TylerH, i changed the screen, maybe there is yet better to understand it? — Kamil, Dec 18 '18 at 21:13
@Kamil That gives me an *idea* of what you want; if my guess is correct, you just need to move the gradient to the left a bit? — TylerH, Dec 18 '18 at 21:48
No :) Left and right i have a different background color outside the container and this was the problem. https://jsfiddle.net/3L5xwsn8/4/ thanks anyway — Kamil, Dec 19 '18 at 01:00

score 0 · Answer 1 · answered Dec 18 '18 at 18:17

You could use a pseudo element to add that divisor. Set the left side to be one color, the right side to be a different color. Then, the pseudo element will contain the actual gradient.

nav{
    width: 100%;
    height: 30px;
}

nav .left {
 background-color: #504e4b;
 
}

nav .left::after {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 100%;
  background-color: red;
  right: 0;
  background-image: -webkit-linear-gradient(156deg, #83817e 46%, white 46%, white 54%, #504e4b 54%);
}

nav .right {
  background-color: #83817e;
}

.row, .container, .right, .left {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
    <div class="container">
        <div class="row">
            <div class="col-sm-9 col left"></div>
            <div class="col-sm-3 col right"></div>
        </div>
    </div>
</nav>

Thank you, i think my question its not so good. The problem is not the diagonal line, the problem ist the background to left and right outside the container. In your example is the background in the container, thats easy ;) but i need the background at the full nav. — Kamil, Dec 18 '18 at 19:17

Background left and other background right considering bootstrap columns

1 Answers1