我怎么能像隐藏信件的软端一样？

Question

我怎样才能像隐藏我的信的软端一样（“D”就像截断的那样;我希望它像渐变一样）

Thx：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>