CODEWITHSUNDEEP
htmlcss
user3808357
user3808357

Reputation: 241

Transparent triangle with fixed background

When pages have fixed background scrolling (not parallax), is there a way to implement a triangle in the second row but have it transparent so that it shows the fixed background?

i.e.

-------------------------
this is fixed background


-----------   -----------
           \ /

second row solid colour
-------------------------

The second row would have a solid colour except the triangle where the background is the fixed image background. is there a way to do this?

Upvotes: 1

Views: 257

Answers (1)

Christina
Christina

Reputation: 34652

DEMO: http://jsbin.com/tidir/1/

http://jsbin.com/tidir/1/edit

enter image description here

HTML

<section class="featurette"></section>

CSS:

body,html {background:#222;height:100%;padding:0;margin:0;}

.featurette {
    background: url(http://lorempixel.com/700/400/cats/);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    width: 100%;
    height:400px;
    position: relative;
    overflow:hidden;
}
.featurette:before,
.featurette:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: 70px;
    margin: 0 0 0 -40px;
    transform: skew(40deg);
    background: #222;
}
.featurette:after {
    left: 50%;
    right: 0;
    margin: 0 -40px 0 0;
    transform: skew(-40deg);
}


.featurette:before {
    left: 0;
    right: 50%;
}

/* demo only */
body {height:2000px;}

Upvotes: 1

Related Questions