CODEWITHSUNDEEP
htmlcssresponsive-design
Nicholas Ritson
Nicholas Ritson

Reputation: 909

CSS3 Background-Color Shapes Style

I've been wondering for a little while now what the best way to do this is. see this link for example: http://prntscr.com/48a54f

Basically if i have a full width website but i want to have 2 colors that are not just blocks but have this shape to them. also keeping in mind that the site would be responsive. I assume i can get around some smaller alignment issues with media queries but whats the best practice to use here? Is there a CSS3 transform option? (i dont need to worry too much about older browser support), my thinking is that if there is a css3 transform option that could be applied to a div or section tag then i could nest the content inside that in to half columns, something like this maybe?

<section class="backgroundStyle">
    <div class="column-6">
        <!-- some content -->
    </div>
    <div class="column-6">
        <!-- some content -->
    </div>
</section>

Upvotes: 1

Views: 13537

Answers (2)

Jason
Jason

Reputation: 4149

You can do it with an extra psuedo element and transform. Background image or gradient would probably be most efficient, however, this allows a little more control of each side if you need to adjust it.

#outer {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

#left {
    width: 50%;
    height: 100%;
    background-color: #CCC;
}

#right {
    width: 50%;
    background-color: #333;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

#right:after {
  content: "";
  display: block;
  width: 30%;
  transform: rotation(50deg);
  background-color: #333;
  position: absolute;
  left: -20%;
  top: -5%;
  height: 120%;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

<div id="outer">
    <div id="left"></div>
    <div id="right"></div>
</div>

http://jsfiddle.net/dHLHt/2/

Upvotes: 3

isherwood
isherwood

Reputation: 61083

Could do a CSS gradient:

http://jsfiddle.net/isherwood/28agr/

background: linear-gradient(135deg, rgba(186, 39, 55, 1) 0%, rgba(186, 39, 55, 1) 51%, rgba(239, 197, 202, 1) 51%, rgba(239, 197, 202, 1) 100%);

http://www.cssmatic.com/gradient-generator

Upvotes: 2

Related Questions