Styling Div wie in Bild gezeigt

Question

Ich brauche ein div auf diese Weise in dem Bild

CSS-Code gezeigt erstellt werden, wie folgt:

/* Styles gehen hier */

.col-sm-3.widget_1_box { 
    padding: 0 5px; 
} 

.bg-success { 
    background-color: #dff0d8; 
} 

.tile-progress { 
    padding: 30px; 
    margin-bottom:1em;; 
} 

ich habe ein div hier in plnkr

<div class="widget_1"> 
      <div class="col-sm-3 widget_1_box"> 
       <div class="tile-progress musers"> 
        <div class="newheader"> 
         <h4><i class="topicname">Manage Users</i> </h4> 
         <!-- <div class="progress"><div class="progress-bar inviewport animated visible slideInLeft" style="width: 40%;"></div></div>--> 
         <!--<span>40% increase</span>--> 
        </div> 
       </div> 

erstellt

https://plnkr.co/edit/kMis2AGzSdKfc1Bhis3e?p=preview

Hilfe benötigt.

Answer 1

einem linearen Gradienten

div { 
 
    background: linear-gradient(110deg, #1e5799 50%, #663399 50%); 
 
    height: 100px; 
 
} 
 
h1 { 
 
    text-align: center; 
 
    background: #1e5799; 
 
    color: white; 
 
    border-bottom: 1px solid rgba(20, 67, 120, 1) 
 
}

<div> 
 
    <h1>HEADER</h1> 
 
</div>