0

Sorry for title butchering, but I must admit I have no clue if there are better terms to describe what I'm trying to achieve. Instead I've included an image (they tend to say a thousand words)

enter image description here

What I'm trying to create is the cyan box. I hope the image kind of explains the idea.

SOLVED

Per Kees van Lierop answer I ended up doing the following:

&__label {
  @include span-columns(6);
  margin-top: 4rem;
  background-color: rgba($color-secondary, 0.5);
  color: white;
  padding: $base-padding;
  position: relative;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    width: 9999px;
    height: 100%;
    background-color: inherit;
  }
}

Giving me a nice result:

enter image description here

Phillip
  • 6,033
  • 3
  • 24
  • 34
  • 1
    can you provide your html css. negative margin, shadow, pseudo, many option could be avalaible if it is about a plain color, for a bg image, little less options :) . You taggd your question with css,sass & bourbon and none of it is in the question, just an image – G-Cyrillus Jan 12 '17 at 15:12
  • I am not currently as my work station, but the only thing really set in stone right now (client specifications) is as follows: container/grid-size: 940px, left/right padding: 1rem. – Phillip Jan 12 '17 at 15:17

1 Answers1

1

You can add a :before pseudo-element which is positioned left to the box, and with the cyan background:

.cyan-box {
    position: relative;

    &:before {
        position: absolute;
        top: 0;
        right: 100%;
        width: 10000000px; // a large amount, long enough to reach the edge
        height: 100%;
        content: '';
        display: block;
        background: cyan;
    }
}
Kees van Lierop
  • 973
  • 6
  • 20
  • 2
    This actually looks good, clean and compatible. I will try this out when I get back to my work station and will accept as answer if it works out how I envisioned. Thanks in advance! – Phillip Jan 12 '17 at 15:19
  • 2
    .cyan will require to be in `position:relative;` and pseudo will also need coordonate `bottom:0;` ;) `bakground:inherit` could be usefull too if bg-color is to be updated or different from box to another. Also , watch out for javascript comment included in css files :( – G-Cyrillus Jan 12 '17 at 15:26
  • @GCyrillus Agreeing on `position: relative`, but how does it still need `bottom: 0` if `height: 100%` is applied? – Kees van Lierop Jan 12 '17 at 15:27
  • bottom:0; will make it grow to the bottom whatever the height even that height:100% is likely to work in any circumstances (i'd rather keep coordonates) fail eample : .`.cyanbox {height:50px; display:table;}` can grow over those 50px set, but height:100% will only consider the 50px – G-Cyrillus Jan 12 '17 at 15:28