css - 我如何才能像隐藏我的信的软端一样？

Question

我怎样才能像一个隐藏我的字母的软端一样(“D”就像被截断了；我想要它像渐变一样)

谢谢:D

编辑:

HTML:

<form action="" method="GET" class="buscar_form">
    <input type="text" name="buscar" id="buscar_form_input_text">
</form>

Answer 1

.test {
  background-color: rgb(102, 51, 153);
  padding: 20px;
  font-size: 2em;
  color: white;
  font-family: sans-serif;
  position: relative;
}



.test:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(90deg , rgb(102, 51, 153) 20px, rgba(102, 51, 153, 0));
  width: 10%;
}

<div class='test'> lorem ipsum </div>