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

我发现了在元素上创建斜角的多种方法,但是我想要实现的是在具有透明度的同时保持这些角的能力.我试图保持这种简单和纯粹在css(或更少)和html中.

下面是我所拥有的当前工作副本,显然是使用白色旋转框重叠导致斜角的边缘.

我注意到的另一种方法是使用线性渐变linear-gradient(-220deg,透明10px,#ad1c1c 10px)；要影响一个角,这确实允许透明性通过,但是我只是无法制作一个简单的示例,将其应用于左上角和右上角.

@H_301_10@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);
}

@H_301_10@<div class="title">
  <h1 class="bevel">Test</h1>
</div>

最佳答案

您可以考虑使用多种背景来实现此效果,并且线性渐变效果非常好(-220deg,#ad1c1c 10px).只需调整大小和位置：

@H_301_10@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;
}

@H_301_10@<h1 >Test</h1>

并使用CSS变量更好地控制大小：

@H_301_10@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;
}

@H_301_10@<h1 >Test</h1>

<h1 style="--s:20px">Test</h1>


<h1 style="--s:30px">Test</h1>

这是考虑偏斜和伪元素的另一个想法：

@H_301_10@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;
}

@H_301_10@<h1 class="bevel">Test</h1>

原文链接：https://www.f2er.com/html/530420.html

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

猜你在找的HTML相关文章