html斜角怎么写代码,html-具有透明度的CSS上的斜角

您可以考虑使用多种背景来实现此效果,并且线性渐变效果非常好(-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;

}

Test