您可以考虑使用多种背景来实现此效果,并且线性渐变效果非常好(-220deg,#ad1c1c 10px).只需调整大小和位置:
h1 {
color: #fff;
text-align: center;
padding:10px;
background:
linear-gradient(-225deg,transparent 10px,#ad1c1c 0) left /50.5% 100%,linear-gradient( 225deg,#ad1c1c 0) right/50.5% 100%;
background-repeat:no-repeat;
}
body {
background:pink;
}
Test
并使用CSS变量更好地控制大小:
h1 {
--s:10px;
color: #fff;
text-align: center;
padding:10px;
background:
linear-gradient(-225deg,transparent var(--s),#ad1c1c 0) right/50.5% 100%;
background-repeat:no-repeat;
}
body {
background:pink;
}
Test
Test
Test
这是考虑偏斜和伪元素的另一个想法:
h1 {
color: #fff;
text-align: center;
padding:0 20px;
background: #ad1c1c content-box;
position:relative;
overflow:hidden;
}
h1:before,h1:after {
content:"";
position:absolute;
top:0;
bottom:0;
width:20px;
background:#ad1c1c;
}
h1:before {
right:0;
transform-origin:left;
transform:skewY(45deg);
}
h1:after {
left:0;
transform-origin:right;
transform: skewY(-45deg);
}
body {
background:pink;
}