Background only in a part of the element

Question

Background only in a part of the element

Navigation

#1 by (1 votes)

1

I have an element, which occupies 100% of the page, but it has a background up to a part of the element, until I know how to do it, but I need it to adapt to 1024px screens and I would like to know other ways to do it. block would be:

Inthecasethebackgroundinthe"Offers" heading that has an arrow at the end.

css css3

asked by anonymous 21.11.2014 / 14:35

1 answer

Display selected Select value Doubt with JSON in Autocomplete JQuery

score 1 · Answer 1

My dear!

As our colleague khaosdoctor said at Background only in a part of the element :

You can set the background of two divs, one on each side and let them stretch

Use two div elements to get the desired effect and use the min-width: property to control the minimum width of your element.

Eg:

html,body{
margin:0;
}

.linha{
width: 100%;
min-width: 768px;
}

.linha [class*="coluna-"]{
float:left;
position: relative;
height: 60px;
}

.linha [class*="coluna-"] > p {
padding: 0 30px;
}

.linha .coluna-a{
width: 40%;
background-color: #515151;
}

.linha .coluna-a::after{
position: absolute;
z-index: 1;
right: -15px;
top: 15px;
content: ' ';
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #515151;
}

.linha .coluna-b{
width: 60%;
background-color: #626262;
}

<div class="linha">
    <div class="coluna-a">
        <p>Coluna A</p>
    </div>
    <div class="coluna-b">
        <p>Coluna B</p>
    </div>
</div>