在带有白色 bg 图像的 div 上制作一个具有透明背景的 CSS 三角形？答案

【问题标题】：Make a CSS triangle with transparent background on a div with white bg image?在带有白色 bg 图像的 div 上制作一个具有透明背景的 CSS 三角形？
【发布时间】：2012-07-07 21:49:01
【问题描述】：

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

基本上他为此使用了背景图片，我想用 CSS 复制它并保持相同的效果。

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

我删除了背景图像并在整个 div 上使用了#FFF，所以现在它都是白色的...我创建了一个新的 div，在其中添加了返回顶部按钮并添加了 background: transparent ，所以它是透明的，但是如何通过 CSS 创建三角形？

非常感谢任何帮助。

【问题讨论】：

你可以尝试使用这个属性：-webkit-background-clip: text;颜色：rgba(0, 0, 0, 0);
相关：stackoverflow.com/questions/23758922/transparent-arrow-triangle

标签： html css css-shapes

【解决方案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;
}

【讨论】：

这是一个很好的回应。请在可能的情况下写一些注释说明为什么会这样。我可以推断出很多推理，但仍有一些事情对我来说是个谜。

【解决方案2】：

给你，http://jsfiddle.net/pkUx7/1/

HTML

<body>
    <div id = "footer"></div>
    <div id = "bottom-line-left"></div>
    <div id = "triangle"></div>
    <div id = "bottom-line-right"></div>
</body>

CSS

body {
    background-color: purple;
}   

div {
    margin:0;
    padding:0;
    background-color: violet;
}

#footer {
    height: 100px;
}

#bottom-line-left, #bottom-line-right {
    display: inline-block;
    height: 20px;
}

#bottom-line-left {
    width: 61%;
}

#bottom-line-right {
    float: right;
    width: 37%;
}

#triangle {
    margin-left:-6px;
    margin-right: -4px;
    padding:0;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid purple;
}

【讨论】：

【解决方案3】：

我只是把这个放在一起，可能有更好的方法来实现这个效果。

HTML

<div class="div1">Lorem Ipsum</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

CSS

body {
    background-color: gray;
    border: 20px solid gray;
}
.div1 {
    background-color: white;
    border: 20px solid white;
}
.div2 {
    float: right;
    border-top: 20px solid white;
    border-right: 20px solid white;
    border-left: 20px solid transparent;
}
.div3 {
    float: right;
    margin: 10px -20px;
    border-bottom: 20px solid white;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}
.div4 {
    border-top: 20px solid white;
    border-right: 20px solid transparent;
    margin-right: 40px;
}

看here。

【讨论】：

【解决方案4】：

下面是一种使用极少标记和 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

【讨论】：

【解决方案5】：

您可以使用矢量path。例如，带有绿色边框的透明三角形：

<svg height="151" width="150">
    <path d="m0 150 h150 l -75 -150 z" fill="transparent" stroke="green" />
</svg>

看here。

【讨论】：