how to write inside div borders with height zero

1847 views html
-4

Hi I want to make something like this picture

so far I have a div

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

using this sass style for it

$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;
}

it looks exactly how I want it to but the problem is that the text inside it, is visible inside the div and not its borders so it looks like the text is outside the div. Is there any way I could show it inside the div borders? Your help is appreciated in advance.

answered question

2 Answers

0

You can use gradient to achieve the same:

.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>

posted this
13

You can insert the text into a span tag and use the position absolute, it should do the trick.

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

The styling will be as follows

$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;
}

posted this

Have an answer?

JD

Please login first before posting an answer.