所以我尝试了以下代码,但它没有用:
#warp,
#text,
#tri {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
z-index: 1;
}
#warp {
background-color: orange;
}
#text {
text-align: center;
z-index: 3;
}
#text h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
}
#tri {
background-color: black;
clip-path: polygon(0 0, 0 100%, 99.8% 150px);
-webkit-clip-path: polygon(0 0, 0 100%, 99.8% 150px);
z-index: 2;
}
<div id="warp">
<div id="text">
<h1>TEXT</h1>
</div>
<div id="tri"></div>
</div>
我发现了一些关于background-image
和倒置文本的结果,但我不知道如何用DIV做到这一点。
如果您只是将相同的文本添加到tri
图层,它的工作原理如下:
编辑:为了允许选择文本,我添加了另一个透明层,将所有文本包装为一个单元。但它确实使更新更具重复性。作为解决方案,我添加了附加的JavaScript代码(这不是必需的)。
var text = "TEXT";
var textElements = document.getElementsByTagName("h1");
for (var i=0; i<textElements.length; i++) {
textElements[i].innerHTML = text;
}
#warp,
#text,
#tri,
#selectable {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
#warp {
background-color: orange;
}
#text {
text-align: center;
z-index: 1;
}
h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
}
#tri {
background-color: black;
clip-path: polygon(0 0, 0 100%, 99.8% 150px);
-webkit-clip-path: polygon(0 0, 0 100%, 99.8% 150px);
z-index: 2;
color: blue;
text-align: center;
}
#selectable {
text-align: center;
z-index: 5;
color: transparent;
}
<div id="warp">
<div id="text">
<h1>TEXT</h1>
</div>
<div id="tri">
<h1>TEXT</h1>
</div>
<div id="selectable">
<h1>TEXT</h1>
</div>
</div>
您可以通过使用线性渐变作为背景来避免剪辑路径,并且mix-blend-mode
将完美地工作:
#text {
width: 150px;
height: 150px;
z-index: 1;
}
#text {
text-align: center;
background: linear-gradient(to top right, black 50%, orange 51%);
}
#text h1 {
margin: 0;
line-height: 150px;
mix-blend-mode: difference;
color: #fff;
}
<div id="text">
<h1>TEXT</h1>
</div>