将<div>放在另一个<div>上？

Question

基本上如何在矩形上放置一条线。我正在寻找最简单的方法，即使用我想的转换操作。我确实找到了类似的问题，但是它们有些不同（它们将图片移动到其他div上），并且这里有一个几何图元。

Answer 1

这是一种简单的方法。只需将伪元素旋转一圈即可：

.box {
  height: 150px;
  width: 200px;
  overflow: hidden;
  position: relative;
  background: tomato;
}

.box::after {
  content: "div2";
  width: 100px;
  height: 20px;
  position: absolute;
  top: 10px;
  left: -30px;
  transform: rotate(-45deg);
  background-color: white;
  text-align: center;
}

<div class="box"></div>