我发现了在元素上创建斜角的多种方法,但是我想要实现的是在具有透明度的同时保持这些角的能力.我试图保持这种简单和纯粹在css(或更少)和html中.
下面是我所拥有的当前工作副本,显然是使用白色旋转框重叠导致斜角的边缘.
我注意到的另一种方法是使用线性渐变linear-gradient(-220deg,透明10px,#ad1c1c 10px)；要影响一个角,这确实允许透明性通过,但是我只是无法制作一个简单的示例,将其应用于左上角和右上角.
h1 {
position: relative;
width: 500px;
background: #ad1c1c;
color: #fff;
font: bold 25px/35px 'Lucida sans';
height: 35px;
padding: 0 30px;
display: inline-block;
}
.title {
text-align: center;
}
.bevel::before,.bevel::after {
position: absolute;
background: #fff;
content: " ";
display: block;
height: 30px;
width: 30px;
}
.bevel::before {
left: -20px;
top: -20px;
transform: rotate(-135deg);
}
.bevel::after {
right: -20px;
top: -20px;
transform: rotate(-45deg);
}<div class="title">
<h1 class="bevel">Test</h1>
</div>最佳答案
您可以考虑使用多种背景来实现此效果,并且线性渐变效果非常好(-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;
}<h1 >Test</h1>并使用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;
}<h1 >Test</h1>
<h1 style="--s:20px">Test</h1>
<h1 style="--s:30px">Test</h1>这是考虑偏斜和伪元素的另一个想法：
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;
}<h1 class="bevel">Test</h1>