Extended bottom edge diagonally,

Question

I'm trying to create this effect (screen) for input field in the search form. The idea is for a diagonal line to appear at the end.

I have absolutely no idea how I can achieve it.

Now I have the usual bottom border, I think a good solution would be to add a pseudo-class element: after and then rotate by 45*. Do I mean right?

#searchform input[type="text"]{
  border:none;
  border-bottom: 1px solid #271010;
  padding: 5px 10px;
  width: 188px;
  position: relative;
}

what i have

what i need

Unfortunately putting a pseudo element on an input is not in general within the spec, see for example, discussion and explanation here [link] https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field — A Haworth, May 09 '21 at 16:02

score 0 · Accepted Answer · answered May 09 '21 at 21:25

You could play around with linear gradient backgrounds to achieve roughly that effect.

#searchform input[type="text"]{
  --color: #eeeeee;
  border:none;
  padding: 5px 10px;
  width: 188px;
  position: relative;
  background-image: linear-gradient(to top, var(--color), var(--color)), linear-gradient(-45deg, transparent, transparent 48%, var(--color) 48%, var(--color) 52%, transparent 52%, transparent);
  background-size: 80% 1.5px, 20% 50%;
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, 91% bottom;
}

<div id="searchform"><input type="text"></div>

Thank you, this is a very good way to solve this +1 – DonK May 10 '21 at 04:49 — DonK, May 10 '21 at 04:49

Extended bottom edge diagonally,

1 Answers1