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

【问题标题】：Put <div> over another <div>?把 <div> 放在另一个 <div> 上？
【发布时间】：2018-09-11 20:40:17
【问题描述】：

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

【问题讨论】：

div 1 相对位置，div 2 绝对位置。显示您的 html 以获得更好的答案
Is it possible to create an angled corner in CSS?的可能重复

标签： html css

【解决方案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;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：