所以我尝试了以下代码,但它没有工作:
#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>
&#13;
我找到了一些关于background-image
&amp;的结果倒置的文字,但我不知道怎么用DIV。
答案 0 :(得分:3)
您可以使用线性渐变作为背景来避免剪辑路径,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;
}
&#13;
<div id="text">
<h1>TEXT</h1>
</div>
&#13;
答案 1 :(得分:1)
如果您只是将相同的文字添加到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>