如何在高度為零的div邊框內寫入

Question

嗨，我想做這樣的事情

到目前為止我有一個 div

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

使用這種 sass 風格

$corner-bevel: 20;
.corner-bottom-left-bevel {
    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;
}

它看起來正是我想要的樣子，但問題是它里面的文本在 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>

樣式如下，並確保添加位置：相對於父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;
}