CODEWITHSUNDEEP
htmlcsslayercss-shapes
robert
robert

Reputation: 125

'layers' in html, transparent part

I want this: http://gyazo.com/0fe69e349ed5cd4e72a08ed8e60af5d4
But I can't manage to achieve it.
I can not change the image. I have used an image as a mask, but that gives me this: http://gyazo.com/b69e840d095212bce422252cec081fe9
Is there a way to make the side parts white aswell?

My code:

#section1{
    height:275px;
    width:100%;
    background-image: url('/img/paral1.jpg');
    background-position: center top;
    background-repeat:no-repeat;
    background-size: 100% 916px;
}
.overlay{
    position: absolute;
    margin-top:180px;
    height:100px;
    width:100%;
    overflow: hidden;

}
.mask{
    margin: 0 auto;
    background-image: url('/img/section1.png');
    height:100px;
    width:1080px;
    background-size:100% 100%;
}

edit: JSfiddle: http://jsfiddle.net/31kxqmLt/
JSfiddle in fullscreen: http://jsfiddle.net/31kxqmLt/embedded/result/
edit edit: The mask must have a width of 1080px and the rest of the space should be white.

Upvotes: 2

Views: 214

Answers (2)

web-tiki
web-tiki

Reputation: 103820

I made this Html/css example of the shape you are trying to make.

It uses background image, pseudo elements and skewX to give the transparent cut out effect on bottom left and bottom right. It also is responsive :

DEMO

output :

image with transparent mask

.wrap {
    width:100%;
    padding-bottom:30%;
    position:relative;
}
.wrap:before {
    content:'';
    background-image: url(http://i.imgur.com/ug3M32a.jpg);
    background-size:100% auto;
    position:absolute;
    width:100%;
    left:0;
    height:50%;
}
.b{
    position:absolute;
    bottom:0;
    width:50%; height:50%;
}
.l{
    left:5%;
    transform-origin: 0 0;
    transform: skewX(45deg);
    overflow:hidden;
    border-bottom-left-radius:3%;
}
.r{
    right:5%;
    transform-origin: 100% 0;
    transform: skewX(-45deg);
    overflow:hidden;
    border-bottom-right-radius:3%;
}
.l:before, .r:before{
    content:'';
    display:block;
    width:100%; height:100%;
    background-size: 200%;
    background-image: url(http://i.imgur.com/ug3M32a.jpg);
}
.l:before{
    background-position: 10% -100%;
    transform-origin: 0 0;
    transform: skewX(-45deg);
}
.r:before{
    background-position: 90% -100%;
    transform-origin: 100% 0;
    transform: skewX(45deg);
}
body {
    padding:20px 10%;
    background-image : url(http://i.imgur.com/k8BtMvj.jpg);
    background-size:cover;
}
<div class="wrap">
    <div class="b l"></div>
    <div class="b r"></div>
</div>

Upvotes: 3

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

Js fiddle

full screen

Js fiddle

edited the mask image

set mask width to 100% so that it fits in all the resolutions

.mask{
    margin: 0 auto;
    background: url('http://s29.postimg.org/5g7z03ypz/image.png') no-repeat bottom;
    height:100px;
    width:100%;
    background-size:100% auto;
}

for smaller resolution min-width 300

#section1{
    max-height:200px;
    min-height:30%;
    overflow:hidden;
    position:relative;
}

JS Fiddle

Upvotes: 1

Related Questions