小编Joh*_*ohn的帖子

文字后一行

我正在尝试创建类似这样的东西：

屏幕截图

到目前为止，我已经做到了：

h2:after {
  content: "";
  display: inline-block;
  height: 0.5em;
  vertical-align: bottom;
  width: 48px;
  margin-right: -100%;
  margin-left: 10px;
  border-bottom: 1px solid black;
  border-left: 1px solid red;
  border-right: 1px solid red;
}

Run Code Online (Sandbox Code Playgroud)

<h2>html</h2>

Run Code Online (Sandbox Code Playgroud)

有谁能够帮助我？

html css css3

Joh*_*ohn

2018 12-24

3
推荐指数

1
解决办法

61
查看次数

如何对倾斜矩形的高度进行动画处理？

我正在尝试在矩形悬停时制作动画。我要达到的目的是使Rectangle在显示的倾斜角度上占据整个高度，而我不想拉直。到目前为止，这是我所做的。我也使用了转换矩阵，但效果不佳

.square {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  background-color: black;
  border: 1px solid black;
  width: 100px;
  height: 8px;
  background-color: rgba(252, 207, 39, .2);
  -webkit-transform: skew(-25deg);
  -moz-transform: skew(-25deg);
  -ms-transform: skew(-25deg);
  -o-transform: skew(-25deg);
  transform: skew(-25deg);
  transition: transform 1s;
}

.square:hover {
  transform: scaleY(50);
}

Run Code Online (Sandbox Code Playgroud)