html - 带有上下的css3三 Angular 形

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

1）它必须是向上箭头
2）它一定是下错误

但我需要在1节课中添加它们

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

我可以这样做吗？

最佳答案

如果您打算将此用于设计（而不是功能性），则可以使用伪元素：

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>