html - 如何在高度为零的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>