html-具有透明度的CSS上的斜角_html-js-css

概述我发现了在元素上创建斜角的多种方法,但是我想要实现的是在具有透明度的同时保持这些角的能力.我试图保持这种简单和纯粹在css(或更少)和html中.下面是我所拥有的当前工作副本,显然是使用白色旋转框重叠导致斜角的边缘.我注意到的另一种方法是使用线性渐变linear-gradient(-220deg,透明10px,#ad1c1c 10px)；要影响一个角,这确实

我发现了在元素上创建斜角的多种方法,但是我想要实现的是在具有透明度的同时保持这些角的能力.我试图保持这种简单和纯粹在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 >  <h1 >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 >Test</h1><h1 >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;}