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>

Answer 1

您可以考虑多种背景来实现这一目标，而您的with a as ( select calendar_date, sum(NY_dayscore * cAttendance) as showed from vw_appointments a where status = 'Confirmed' group by calendar_date ) select a.*, a2.running_average from a outer apply (select avg(showed) as running_average from a a2 where a2.calendar_date <= a.calendar_date ) a2 order by calendar_date;几乎可以说是不错。只需调整大小和位置即可：

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

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

<h1 >Test</h1>

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

具有透明度的CSS上的斜角

1 个答案: