css3 上下三角形

Question

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

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

但我需要将它们添加到 1 class

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

我可以这样做吗？

Answer 1

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

观看现场演示

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

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

Answer 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>

但是，如果您需要它实际上是功能（即，如果您需要它是 'pressable' 就进行注册 - 那么您将需要使用多个元素因为在 'key pressing' 的 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>

css3 上下三角形

css3 triangle with up and down

html

css

css-shapes