Html CSS透明下三角只在后面使用

我需要创建一个页面使用CSS三角形。我担心的是我只能使用

：after

形象

HTML:

---

我希望徽标应该显示在三角形上方。

这是因为z-index应用于logo类，这两次都是您需要从中删除z-index的同一类。logo并将-ve z-index添加到。logo:：after

.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
position: relative;
/*margin-right: 160px;*/
 }
 .logo::after {
content: '';
 border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
 /*transform-origin: 0 100%;        
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: -1;
 }

---

这里有一个工作链接：

这是因为z-index同时应用于logo类，这是您需要从.logo中删除z-index并将-ve z-index添加到中的同一类

.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
position: relative;
/*margin-right: 160px;*/
 }
 .logo::after {
content: '';
 border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
 /*transform-origin: 0 100%;        
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: -1;
 }

这里有一个工作链接：

还有一个选择：

HTML:

i
应用此css：
.标志{
背景：3498db无重复滚动0；
边界半径：100%；
盒影：0 5px 0#2980b9；
高度：100px；
宽度：100px；
文本对齐：居中；
位置：相对位置；
}
.logo>span{
颜色：#fff；
字体系列：-moz固定；
字号：82px；
字号：600；
文本对齐：居中；
文本阴影：1px 3px 1px#000；
}
.logo：：之后{
左边框：50px实心透明；
右边框：50px实心透明；
边框顶部：50px实心#f00；
底部：-45px；
内容：“；
身高：0；
左：0；
位置：绝对位置；
宽度：0；
z指数：-1；
}

输出：

更多信息请点击这里

希望这对你有帮助

如果有任何疑问，请告诉我。

还有一种选择：

HTML:

i
应用此css：
.标志{
背景：3498db无重复滚动0；
边界半径：100%；
盒影：0 5px 0#2980b9；
高度：100px；
宽度：100px；
文本对齐：居中；
位置：相对位置；
}
.logo>span{
颜色：#fff；
字体系列：-moz固定；
字号：82px；
字号：600；
文本对齐：居中；
文本阴影：1px 3px 1px#000；
}
.logo：：之后{
左边框：50px实心透明；
右边框：50px实心透明；
边框顶部：50px实心#f00；
底部：-45px；
内容：“；
身高：0；
左：0；
位置：绝对位置；
宽度：0；
z指数：-1；
}

输出：

更多信息请点击这里

希望这对你有帮助

---

如果有任何疑问，请告诉我。

您的子元素不能低于父元素。这似乎是您几天前发布的问题的重复，我建议您使用新信息更新原始问题并删除此问题。如果您这样做，我应该能够为您的问题找到解决方案。您的子元素不能低于父元素。这似乎是您几天前发布的问题的重复，我建议您使用新信息更新原始问题并删除此问题。如果你这样做的话，我应该能够想出一个解决你问题的办法。我正要发布同样的消息。要了解更多信息，你可以查看这篇文章：不幸的是，这会把三角形放在所有东西下面。我添加了一个带有背景的容器来演示：然后你可以在容器中添加

：：after

？@anierzad而且我发现容器背景盖过了三角形。这真的很有帮助。谢谢。我正要发布同样的内容。要了解更多信息，你可以查看这篇文章：不幸的是，这会把三角形放在所有东西下面。我添加了一个带有背景的容器来演示：然后你可以在容器中添加

：：after

？@anierzad而且我发现容器背景盖过了三角形这真的很有帮助。谢谢。

.logo {
background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png");
width:124px;
height: 131px;
float: left;
margin-left: 290px;
margin-top: 30px;
margin-bottom: 93px;
position: relative;
/*margin-right: 160px;*/
 }
 .logo::after {
content: '';
 border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-top: 80px solid white;
position: absolute;
width: 0;
height: 0;
top: 90px;
left: -15px;
/*top: 120px;
left: 275px;*/
clear: both;
 /*transform-origin: 0 100%;        
transform: rotate(45deg);*/
/*margin-top: 90px;
margin-left: 0px;*/
z-index: -1;
 }

<div class="logo"><span>i</span></div>

Apply this css:

.logo {
  background: #3498db none repeat scroll 0 0;
  border-radius: 100%;
  box-shadow: 0 5px 0 #2980b9;
  height: 100px;
  width: 100px;
  text-align:center;
  position:relative;
}
.logo > span {
  color: #fff;
  font-family: -moz-fixed;
  font-size: 82px;
  font-weight: 600;
  text-align: center;
  text-shadow: 1px 3px 1px #000;
}

.logo::after {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid #f00;
  bottom: -45px;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  width: 0;
  z-index: -1;
}