Question

我已经尝试了与此问题相关的Stack Overflow中的几乎所有解决方案。我有以下CSS代码。

.logo {
 background-image: url("../Images/Brookland-Splash-
 MOBILE_0000s_0000s_0001_BrooklandPress-CMYK-copy-2.png");
 width:124px;
 height: 131px;
 float: left;
 margin-left: 290px;
 margin-top: 30px;
 margin-bottom: 93px;
 z-index: 10;
 }
.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: 120px;
 left: 275px;
 clear: both;
}

Answer 1

只需在position: relative div

中使用.logo即可

.logo {
     background-image: url("../Images/Brookland-Splash-
     MOBILE_0000s_0000s_0001_BrooklandPress-CMYK-copy-2.png");
     width:124px;
     height: 131px;
     float: left;
     margin-left: 290px;
     margin-top: 30px;
     margin-bottom: 93px;
     z-index: 10;
     position: relative
 }
.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: 120px;
     left: 275px;
     clear: both;
}

如何使用带有伪元素和较低z-index的css三角形？

1 个答案: