CSS- 样式 "handles" 以上 div 没有 css 绝对

Question

我用上面的 "handles" 设置了 "Calendar" div 的样式。

这是通过设置 2 div 3*3 px 和黑色背景创建的，并将它们放置在父级 div 内日历 div 顶部正上方的绝对位置相对位置。

此日历位于图像上方的绝对位置。

这行得通，但感觉非常 "hard coded" 因为日历中的每次更改 div 都会破坏显示，因为“句柄”会留在同一位置，而日历顶部边框会移动。

如何在日历 div 本身的顶部获得相同的 "handles" 样式，这样日历 CSS 高度的变化不会影响 "handles"？

Answer 1

您可以像这样使用 psuedo-element - 请参阅下面的工作示例。

.cal::before 元素是一个 3px 高的框 (height)，左右各有 3px 的黑色边框。

它在 Y 轴上绝对偏离父日历元素 -6px (top)，因此它超过了日历的上边框，3px left 和 right日历范围。

.cal {
  border: 3px solid #000;
  display: inline-block;
  font-family: sans-serif;
  position: relative;
  text-align: center;
}

.cal span {
  /* day */
  display: block;
  font-size: 10px;
  padding: 3px 10px;
}

.cal b {
  /* date number */
  display: block;
  border-top: 3px solid #000;
  padding: 5px;
}

.cal::before {
  /* handles */
  content: '';
  position: absolute;
  height: 3px;
  top: -6px;
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  left: 3px;
  right: 3px;
}

<div class="cal">
  <span>SUN</span>
  <b>3</b>
</div>

<br><br>

<div class="cal">
  <span>TALLER</span>
  <b>3</b>
  <b>4</b>
  <b>5</b>
</div>

CSS- 样式 "handles" 以上 div 没有 css 绝对

CSS- Style "handles" above div without css absolute

html

css

flexbox

css-gradients