在带有白色bg图像的div上创建一个带透明背景的CSS三角形？

Question

好的,我正在尝试复制您在页面底部看到的效果,并使用回到顶部按钮:http://www.ppp-templates.de/tilability/ - 在我们停留的内容区域之后连接的.

基本上他正在使用背景图像,我想用CSS复制它并保持相同的效果.

我知道如何使用带边框的CSS创建三角形,但在我的情况下,我想使用透明的bg图像而不是颜色,所以我不能使用边框

我删除了背景图像和对整个DIV使用#FFF,所以它是全白的,现在......我创建了一个新的div中,我加入了返回顶部按钮,增加的背景:透明的它,因此它是透明的,但怎么办我通过CSS创建三角形？

任何帮助是极大的赞赏.

Answer 1

小提琴:

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

HTML:

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

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;
}
?