0

I am trying to achieve this effect using HTML/CSS:

enter image description here

What I have until now is this http://jsfiddle.net/zxq91ok0/

.wrap {
position: relative;
overflow: hidden;
width: 100%;
height:250px;
margin: 0 auto;
background-color:#B2C2CC;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.wrap:before, .wrap:after {
content:'';
position: absolute;
bottom: 0;
width: 50%;
background-color: inherit;
padding-bottom:3%;
}
.wrap:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
.wrap:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}

The problem I face is that instead of plain background color I have another image as a background so I can't figure out how to get rid of the light blue background.

Can you help me accomplish the effect shown on the first image? Thanks!

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
brickyyyy
  • 66
  • 6

1 Answers1

0

I think you can't add a triangle in your shape and use it as a mask like that. You need to use SVG shapes and masks or the CSS mask-image property (example - beware that's not supported by all browsers).

flks
  • 610
  • 10
  • 28