Background only in one part of the element

Asked

Viewed 635 times

1

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

inserir a descrição da imagem aqui

In case the background in the title "Offers" that has an arrow at the end.

css css3

  • I don’t understand your question.

  • 1

    This bar has 2 backgrounds, two colors and the arrow, only in this image the bar has 1920px, and would have to adapt to 1024px screens, only in this project, I can not use media resources.

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

1 answer

1

My dear!

Like our colleague khaosdoctor said in Background only in one part of the element:

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

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

Ex.: 

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>

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.