Is it possible to hide a field under a pseudo-link? (inside gif-example) Are there implementations?

Question

css

The pseudo-link, when clicked, turns into a field where you can change the data. In this case, the link should be named the same as the text inside the field.

Is it possible to mask the field like this? Maybe you have seen implementation examples?

Answer 1

Something like this https://jsfiddle.net/nuvveo53/
Better yet (and with text): https://jsfiddle.net/Ankhena/kmkos2zx/
Calc and positioning need to be finalized. It is necessary to count the angles and insert them into js.
(Maybe you can do without js, you have to think)
Or clip-path.

Answer 2

Just look , right?

Answer 3

Try:

.box {
  transform: skewX(10deg);
}
.box > * {
  transform: skewX(-10deg);
}

Answer 4

as an option, svg in data-uri on the background

h3 {
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 200 10' preserveAspectRatio='none'%3E
%3Cpath d='M 1 0 H 198 L 199 9 L 2 10 z' fill='#ddd'/%3E%3C/svg%3E");  
}

https://jsfiddle.net/tzf9Lnnv/2/

Answer 5

The right corner must fall clearly into the border?
If it is not necessary, then something like this: https://jsfiddle.net/tzf9Lnnv/
If it is necessary, then I'm afraid that it won't do without clip-path.

Answer 6

Elementary - jsfiddle.net/cr4hon21
Or so - jsfiddle.net/cr4hon21/1