Question

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

1）它必须是向上箭头 2）它必须倒闭

但我需要在1级

中添加它们

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

我可以这样做吗？

Answer 1

如果你想为设计制作它（而不是功能），你可以使用伪元素：

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>

Answer 2

您可以使用CSS transform创建一个方形div并将其旋转45度。您可以在JSFiddle

查看其实时演示

<div class="diamond"></div>

<style>
   .diamond {
      width: 100px;
      height: 100px;
      background-color: red;
      transform: rotate(45deg);
   }
</style>

css3上下三角形

2 个答案: