Make a CSS triangle with transparent background on a div with white bg image?

Question

Ok so, I'm trying to replicate the effect you see here at the bottom of the page, with the back to top button: http://www.ppp-templates.de/tilability/ - After the content area for We stay connected.

basically he's using a background image for that and I'd like to replicate it with CSS and keep the same effect.

I know how to create triangles with CSS with borders, but in my case I'd like to use the transparent bg image and not a color so I can't use borders

I removed the background image and used #FFF on the whole div, so it's all white now... I created a new div in which I added the back to top button and added background: transparent to it so it's transparent, but how do I create the triangle via CSS?

Any help is greatly appreciated.

Answer 1

Here's one way to make a triangle with fairly minimal markup and css:

HTML:

<div class="triangle"></div>

CSS:

.triangle {
    width: 0; 
    height: 0; 
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 35px solid gray;
}

http://jsbin.com/iribib/21

Answer 2

The Fiddle:

http://jsfiddle.net/JaMH9/2/

The HTML:

<div class="bar">
    <span class="home">^<br>Home, sweet home!</span>
</div>​

The CSS:

.bar {
    position: relative;
    width: 90%;
    height: 30px;
    margin: 0 auto;
}

.home {
    position: absolute;
    top: 0px;
    left: 60%;
    width: 20%;
    text-align: center;
}

.bar:before, .bar:after {
    content:'';
    position: absolute;
    top: 0;
    height: 0;
    border-top: 30px solid white;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.bar:before {
    left: 0;
    width: 70%;
    border-right: 30px solid transparent;
}

.bar:after {
    right:0;
    width: 30%;
    border-left: 30px solid transparent;
}
​