html - css3三 Angular 形上下

Question

我需要创建 1 个 div 元素，我需要在其中绘制 2 个三 Angular 形作为 1

1) 必须是向上箭头2) 必须向下箭头

但我需要将它们添加到 1 个类中

我知道我可以创建 2 个类，然后用边距连接它们，但我只需要一个类这是个问题。

我可以这样做吗？

Answer 1

如果您希望将 This 用于设计(而不是功能性)，您可以使用伪元素:

div {
  position: relative;
  margin: 50px;
  height: 100px;
  width: 100px;
  transform: rotate(45deg);
}
div:before {
  content: "";
  height: 40%;
  width: 40%;
  top: 0;
  left: 0;
  position: absolute;
  border-top: 5px solid black;
  border-left: 5px solid black;
  transition: all 0.6s;
}
div:after {
  content: "";
  height: 40%;
  width: 40%;
  bottom: 0;
  right: 0;
  position: absolute;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
  transition: all 0.6s;
}
div:hover:before,
div:hover:after {
  border-color: tomato;
}

<div></div>

---

但是，如果您需要它具有实际功能(即，如果您需要它是“可按下的”则进行注册 - 那么您将需要使用多个元素，因为伪元素不可区分在 DOM 中用于“按键”):

div {
  margin: 50px;
  height: 100px;
  width: 100px;
  position: relative;
}
div .up {
  position: absolute;
  top: 0;
  left: 50%;
  height: 50%;
  width: 50%;
  transform-origin: top left;
  transform: rotate(45deg);
  border-left: 5px solid tomato;
  border-top: 5px solid tomato;
  transition: all 0.6s;
}
div .down {
  position: absolute;
  top: 45%;
  left: -5%;
  height: 50%;
  width: 50%;
  transform-origin: bottom right;
  transform: rotate(45deg);
  border-bottom: 5px solid tomato;
  border-right: 5px solid tomato;
  transition: all 0.6s;
}
div span:hover {
  border-color: black;
}

<div>
  <span class="up"></span>
  <span class="down"></span>
</div>