How do I overlay a html input with a triangle of color and some text?

Question

I have an HTML form that looks like this:

But I don't have a lot of room, so I'd like to have the m: and f: tags within the input boxes. And I want to indicate that they're not really part of the input, so I'd like to have them partially obscured by transucent triangles, which I want behind the dark bold text, so that if someone types more text the triangle will not be as relevant, sort of like this:

I've seen stuff like this recently on web checkout forms that ask for the person's name and CCN, and when I start typing in the field the legend text moves up and shrinks.

Is there a straightforward way to do this?

See [how to make CSS triangles](https://css-tricks.com/snippets/css/css-triangle/) and [any tutorial on CSS positioning](https://marksheet.io/css-position.html). You can also right click and choose _Inspect_ on the web pages you've already seen this on to see how they've solved the problem. — Etheryte, May 12 '19 at 03:27

score 0 · Accepted Answer · answered May 12 '19 at 10:02

Use a simple background on the input element:

label {
  position:absolute;
}
input {
  background:linear-gradient(to top left,transparent 49.5%,rgba(255,0,0,0.5) 50%) left/20px 100% no-repeat;
  padding-left:20px;
  border:1px solid;
}

<div class="box">
<label for="name">m:</label><input id="name" type="text">
</div>

Related: https://stackoverflow.com/a/49696143/8620333

How do I overlay a html input with a triangle of color and some text?

1 Answers1