我怎么能像隐藏信件的软端一样？(How I can make like a soft end that hides my letter?)

我怎么能像隐藏信件的软端一样？(How I can make like a soft end that hides my letter?)

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

谢谢：D

编辑：

HTML：

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

How I can make like a soft end that hides my letter (The "D" it's like truncated; i want it like with a gradient)

Thx :D

EDIT:

HTML:

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

最满意答案

.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> 
  
 
 
 
  
  
.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> 
  
 
我怎么能像隐藏信件的软端一样？(How I can make like a soft end that hides my letter?)

                
  
 
 我怎么能像隐藏我的信的软端一样（“D”就像截断的那样;我希望它像渐变一样） 
 
 谢谢：D 
 
 编辑： 
 
 HTML： 
 
<form action="" method="GET" class="buscar_form">
    <input type="text" name="buscar" id="buscar_form_input_text">
</form>
 
How I can make like a soft end that hides my letter (The "D" it's like truncated; i want it like with a gradient)
 
Thx :D
 
EDIT:
 
HTML:
 
<form action="" method="GET" class="buscar_form">
    <input type="text" name="buscar" id="buscar_form_input_text">
</form>

                
最满意答案
                
                    
                        
 
 
  
  
.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> 
  
 
 
 
  
  
.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>