html - 带透明度的 CSS 上的斜角

Question

我找到了多种在元素上创建斜角的方法，但我想要实现的是在具有透明度的同时保留这些角的能力。我试图在 css（或更少）和 html 中保持简单和纯粹。

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

我注意到的另一种方法是使用线性渐变linear-gradient(-220deg, transparent 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>

标签： htmlcss

Answer 1

您可以考虑多种背景来实现这一点，并且您的linear-gradient(-220deg, transparent 10px, #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,transparent 10px,#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) left /50.5% 100%,
    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>