html 边框形状,html – 隐藏在CSS边框形状后面的文本

我正在尝试使用背景颜色创建一个围绕文本的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;

}

HELLO WORLD

此时,文本显示在背景下方.如何使文本显示在棕色背景中？

最佳答案

由于边框高度为50px,因此您可以在内部插入相同数量的负边距：

h1.skew::before {

content: '';

display: block;

margin-top: -50px;

}body {

background: #ddd;

}

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.skew::before {

content: '';

display: block;

margin-top: -50px;

}

HELLO WORLD

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！