CSS: a piece of background in different color?

StackOverflow https://stackoverflow.com/questions/17034082

  •  31-05-2022
  •  | 
  •  

Question

I'm trying to make a crossbrowser implementation of background in 2 parts each of different color.

Like this: http://imgur.com/l6ajF2q

For this I've wrote following code (fiddle: http://jsfiddle.net/yrQAx/):

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      .block {
        position: relative;
        background-color: #ddd;
        overflow: hidden;
      }

      .block .bottom-color {
        position: absolute;
        z-index: 999;
        top: 10%;
        left: 0px;
        width: 150%;
        height: 300%;
        background-color: #bbb;
        -moz-transform:rotate(173deg);
        -webkit-transform:rotate(173deg);
        -o-transform:rotate(173deg);
        -ms-transform:rotate(173deg);
        transform:rotate(173deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.73);
      }

      .block .content {
        position: relative;
        background: transparent;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div class="block">
      <div class="content">
        <h2>Lorem ipsum</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, nibh nec cursus ultricies, est ligula tempus lectus, eget eleifend orci ipsum vitae velit. Proin mollis pharetra fermentum. Nullam sed semper nulla. Donec fermentum faucibus faucibus. Aenean rhoncus, mi viverra ultrices tincidunt, erat nibh auctor nisi, nec fermentum turpis orci euismod ligula. Sed eu tincidunt nunc, non molestie nisi. Nunc consequat, est in euismod consequat, libero justo laoreet lectus, id ornare ante tortor non magna. Fusce porta fringilla elementum. Maecenas pharetra nunc orci, ut facilisis ipsum iaculis ultrices. Vestibulum non odio eget enim pulvinar facilisis a ac nunc. Vestibulum sodales augue et lorem pulvinar bibendum id id turpis.

        Vestibulum blandit cursus imperdiet. Vestibulum venenatis massa diam, auctor pretium nisl rhoncus sit amet. Sed interdum metus tellus, id faucibus risus rhoncus vel. Duis tincidunt est quis justo suscipit pulvinar. Donec condimentum libero in turpis interdum, sed feugiat enim tempus. Vivamus a quam venenatis dui porta consectetur. Mauris ac scelerisque erat. Cras adipiscing purus a sem varius interdum ac sit amet nunc. Quisque iaculis ante nisl, non fringilla ante egestas eget. Sed sit amet est ultricies, commodo odio vitae, blandit justo. Fusce volutpat laoreet blandit. Mauris sapien arcu, sollicitudin quis porta non, rhoncus sed orci. Pellentesque faucibus neque at est ultrices dignissim. Quisque viverra, tortor ut feugiat aliquet, nisl nulla ullamcorper nisl, id laoreet dui turpis vel mi. Nunc sagittis, dui in posuere pharetra, libero nulla sollicitudin quam, venenatis imperdiet mi velit quis nibh.

        Pellentesque nibh massa, faucibus et nisl nec, ullamcorper tincidunt nibh. Proin iaculis commodo sapien, nec dapibus augue luctus eget. Praesent magna augue, semper non orci id, vehicula imperdiet justo. Nulla porta gravida euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae est egestas, dictum quam ut, semper nisl. Suspendisse ligula orci, tincidunt venenatis convallis eu, condimentum in nunc. Vestibulum mollis fermentum malesuada. Sed rutrum erat quis quam molestie condimentum.

        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer consectetur congue massa, eu viverra nisi tristique ut. Maecenas pulvinar eget sem in pharetra. Nulla malesuada ultricies eros, ac tristique massa pulvinar ut. Fusce mattis auctor leo, ut ultrices eros ultricies vel. Fusce ac augue nec mi congue sollicitudin at quis nisi. In nec venenatis arcu. Integer ac mauris dapibus, imperdiet nibh suscipit, venenatis arcu. Etiam hendrerit magna ligula, et sodales nunc imperdiet id. Praesent dapibus erat ac ipsum tempor fringilla. Fusce posuere massa sit amet elit porta, in facilisis ipsum dapibus.
      </div>
      <div class="bottom-color"></div>
    </div>
  </body>
</html>

As you can see it is based on rotating div.bottom-color element which is responsible for second color. There's a big problem: whenever I resize container (div.block) second color can be lost at all or first color (div.container background) is being lost.

So my question is: how do I fix that? Or am I doing this wrong and this effect should be done in some other way?

Was it helpful?

Solution

Your best bet would be to use a gradient background. The angle will need to be adjusted, of course.

http://cssdeck.com/labs/xbmc9zum

.content {
    background: #ebf1f6; /* Old browsers */
    background: -moz-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* FF3.6+ */
    background: -webkit-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* IE10+ */
    background: linear-gradient(135deg, #bbb, #bbb 20em, #ddd 20em); /* W3C */
}

http://www.colorzilla.com/gradient-editor/

OTHER TIPS

Your solution is not cross-borwser friendly. What you should do instead is create a .png image that has one side triangle with the dark gray. And make the other side 100% transparent and let the background color see through. The image you make WILL be large - but fortunately png images take only a few bytes when you only use 2 colors.

Your best bet is to use cimmanon solution (gradients).

However, if you want to make your solution work, see that CSS

    top: 0px;
    right: 0px;
    width: 150%;
    height: 300%;
    background-color: #bbb;
    -moz-transform:rotate(-26deg);
    -webkit-transform:rotate(-26deg);
    -o-transform:rotate(-26deg);
    -ms-transform:rotate(-26deg);
    transform:rotate(-26deg);
    -webkit-transform-origin: top right;
    transform-origin: top right;

I have added a trandform origin of top right. This way, you are making the div rotate around that point. Also note the top 0px and right 0px, That also make this point (the top right) well positioned.

With that changes, the div will be always where you want it.

demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top