Priyoshika Ram Priyoshika Ram - 1 year ago 107
CSS Question

Styling Div as shown in image

I need a div to be created this way shown in the imageenter image description here

CSS code as follows :

/* Styles go here */

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

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

.tile-progress {
padding: 30px;

I have created a div here 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>-->

Need assistance.

Answer Source

Use a linear gradient

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)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download