0

I have been asked to create a responsive application, the layout / theme of the application has a angled shapes (see image below). I've tried using CSS3 skew and rotate however these property values manipulated the content as well as the shape which is not what i want. I would just like the shape to have what appears to be a 90 degree angle and the text to lay on top of the shape.

Can this be accomplished using CSS3?

enter image description here

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • Could you expand on `the text to lay on top of the shape`? How exactly should it look like? – Hashem Qolami Oct 10 '14 at 22:08
  • I would like header text to be placed on top of the yellow 90 degree angle shape, the yellow angled background shape will be placed on top of a white background. I've updated the image for a better visual of what I am trying to describe. Thanks. –  Oct 10 '14 at 22:24

3 Answers3

2

Rather than using skew and rotate on the container itself, you can use an ::after rule to create an empty div to rotate.

jsfiddle here: http://jsfiddle.net/carasin/ndb1koca/1/

html:

<div id="banner-wrap">
     <div id="banner"><h1>Text here</h1></div>
</div>

css:

#banner-wrap {
    position:relative;
}
#banner::after { 
    content: "";
    display:block;
    background: orange;
    width:200%;
    height:500px;
    position:absolute;
    left:-30%;
    top:-60%;
    z-index:0;
    transform: rotate(13deg);
}
h1 {
    font-family:sans-serif;
    color:#fff;
    text-transform:uppercase;
    font-size:3em;
    z-index:1;
    position:relative;
    padding:40px 30px ;
}
Chris Arasin
  • 516
  • 2
  • 8
2

I've tried using CSS3 skew and rotate however these property values manipulated the content as well as the shape which is not what i want.

In order to prevent the content from being affected you could simply skew() the content In the opposite direction as well - Example.

Used properties

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
}

h1, h2 {
  text-transform: uppercase;
  font-size: 6vw;
}

h2 {
  font-size: 4vw;
}

.wrapper {
  overflow: hidden;
}

header {
  background-color: gold;
  height: 40vw;
  line-height: 40vw;
  
  -webkit-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  transform: skewY(10deg);
  
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  -o-transform-origin: 100% 0;
  transform-origin: 100% 0;
  
  -webkit-box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
  box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
}

header h1 {
  -webkit-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg);  
  padding-left: 1em;
  color: white;
}

.search {
  background-color: lightgray;
  padding: 1em;
  margin: 0 1em;
}
<div class="wrapper">
  <header>
    <h1>Hello World</h1>
  </header>
</div>

<div class="search">
  <h2>Search</h2>
</div>
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
0

There's an upcoming CSS property that allows you to create this effect without hacks. It's called clip-path, though presently (Oct 2014) you need to use -webkit-clip-path to avoid collisions with an existing SVG CSS property. The two properties will be merged soon into a single clip-path.

This works today in Chrome, Safari, iOS 8 and Opera (Firefox will follow soon, without -webkit- prefix, obviously):

#banner {
  background: yellow;
  width: 600px;
  height: 300px;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 50%);
}

Since the polygon uses percentages, the clipping shape will scale with the container whatever dimensions it has -- good for responsive design.

Your use case means that this solution can degrade gracefully to a simple rectangle.

Learn mode about clipping as part of CSS Masking.

Razvan Caliman
  • 4,509
  • 3
  • 21
  • 24