如何在高度为零的div边界内书写

Question

嗨，我想做这样的

到目前为止，我有一个div

Sub test()
    Dim rngDB As Range, rng As Range
    Dim vR()
    Dim i As Long, n As Long, j As Integer

    Set rngDB = Range("au8", Range("au" & Rows.Count).End(xlUp))

    For Each rng In rngDB
        If rng.MergeCells Then
            If rng.Address = rng.MergeArea.Range("a1").Address Then
                n = n + 1
                ReDim Preserve vR(1 To 3, 1 To n)
                For j = 1 To 3
                    vR(j, n) = rng(1, j)
                Next j
            End If
        Else
            n = n + 1
            ReDim Preserve vR(1 To 3, 1 To n)
            For j = 1 To 3
                vR(j, n) = rng(1, j)
            Next j
        End If
    Next rng
    Sheets.Add
    Range("a1").Resize(n, 3) = WorksheetFunction.Transpose(vR)
End Sub

为此使用sass风格

<div className="corner-bottom-left-bevel">
    new
</div>

它看起来确实是我想要的样子，但是问题是其中的文本在div内而不是在边框内可见，因此它看起来像在div之外。 有什么办法可以在div边框内显示它吗？ 预先感谢您的帮助。

Answer 1

您可以使用渐变来实现相同效果：

.box {
  padding:5px 15px;
  display:inline-block;
  background:
    linear-gradient(to top right,transparent 49%,#00dbac 50%) left/15px 100%,
    linear-gradient(#00dbac,#00dbac) right/calc(100% - 15px) 100%;
  background-repeat:no-repeat;
  border-radius:5px;
}

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

Answer 2

您可以将文本插入span标记中，并使用绝对位置，这可以解决问题。

<div class="corner-bottom-left-bevel">
    <span class="corner-bottom-left-bevel-text">
        new
    </span>
</div>

样式如下，并确保将 position：relative 添加到父div

$corner-bevel: 20;
.corner-bottom-left-bevel {
    position: relative;
    width: 80px;
    height: 0;
    border-radius: 2px;
    border-style: solid;
    border-color: $green-color transparent transparent transparent;
    border-width: #{$corner-bevel}px 0 0 #{$corner-bevel}px;
}
.corner-bottom-left-bevel-text{
    position: absolute;
    top: -#{$corner-bevel}px;
}