造型Div如图所示

Question

我需要以图片

中显示的方式创建div

CSS代码如下：

/ *样式到这里* /

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

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

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

我在plnkr

中创建了一个div

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

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

需要帮助。

Answer 1

使用线性渐变

＆＃13;

＆＃13;

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)
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;