-2

enter image description here

I have to get this feature in my web page,i.e.on the left trapezoid a google map will be there and on the right trapezoid another background will be there ,how to do that, plz help

Sham
  • 414
  • 2
  • 6
  • 14
  • i have tried drawing a canvas and putting that thing of ,but it covers the whole page ,which i dont want! what should i do next ? – Sham Apr 15 '14 at 10:45
  • 1
    @Sham - use javascript to convert a % into a number of pixels. – enhzflep Apr 15 '14 at 10:54

3 Answers3

0

Just a little hint for you, which should help you getting what you want. Try something like this:

#trapezoid {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

this is from the page http://css-tricks.com/examples/ShapesOfCSS/

Homungus
  • 1,114
  • 1
  • 10
  • 20
  • i have tried that but everytime i try to put some % value,it dissapers – Sham Apr 15 '14 at 10:51
  • thats true, because border-width does not support values in %. but you could convert % in px with javascript on page-load. – Homungus Apr 15 '14 at 10:57
0

You can do something like this:

<div id="container">
    <div id="triangle-topleft"></div>
</div>

and

#container {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}

#triangle-topleft { 
  width: 0; 
  height: 0; 
  border-top: 100px solid gray; 
  border-right: 100px solid transparent;
}

DEMO

4dgaurav
  • 11,360
  • 4
  • 32
  • 59
  • everytime i change the 100 px to % value ,why it dissapers – Sham Apr 15 '14 at 10:50
  • because its triangle made from css read here to get fair enough idea http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work – 4dgaurav Apr 15 '14 at 10:55
0

you can use an overlay with a linear-gradient as background : DEMO

Basic CSS:

#overlay {
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:linear-gradient(
    to bottom right,
    transparent 49.5%,
    rgba(255,0,0,0.5) 50%
    )
    ;
  pointer-events:none;/* avoid click being catched*/
}
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129