我正在尝试创建一个 h1 样式,它用背景色包围文本。
h1.skew {
padding-left: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
border-right: 50px solid transparent;
border-top: 50px solid #4c4c4c;
height: 0;
line-height: 50px;
}
<h1 class="skew">HELLO WORLD</h1>
https://jsfiddle.net/zo32q98n/
此时文本出现在背景下方。如何使文本显示在棕色背景内?
最佳答案
您可以为背景使用伪元素
,并设置z-index: -1
,使其显示在文本下方。
h1.skew {
padding-left: 10px;
text-decoration: none;
color: white;
font-weight: bold;
display: inline-block;
position: relative;
height: 0;
line-height: 50px;
}
h1.skew:before {
content: '';
z-index: -1;
border-right: 50px solid transparent;
border-top: 50px solid #4c4c4c;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
<h1 class="skew">HELLO WORLD</h1>
关于html - 隐藏在 CSS 边框形状后面的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41875075/