write parallelogram with css

css

 .btn_inpu{
        border: none;
      color: #FFFFFF;
      font-size: 18px;
      text-align: center;
      width: 30%;
      font-weight: bold;
      /*变形*/
      transform: skew(-20deg);
    }

html

 <div class="detail_main">
          <div class="row_l" style="border-bottom:1px solid #E6E6E6;">
            <div class="clo_l">
              <span style="color:#FF4438;font-size: 18px;font-weight: bold;margin-left: 20px;margin-top: 20px">29989E67</span>
              <span class="gray_txt1">点击更新店铺打印码</span>
            </div>
            <input type="button" class="btn_inpu" style="margin-left: 70px;background-color: #FC4C4D" value="生成打印码"  />
          </div>
          <div class="row_l" style="border-bottom:1px solid #E6E6E6; margin-bottom: 10px">
            <div class="clo_l">
              <span style="color:#0489FF;font-size: 18px;font-weight: bold;margin-left: 20px;margin-top: 20px">暂无开通流量设备</span>
              <span class="gray_txt1">客流量为当日客流量</span>
            </div>
            <input type="button" class="btn_inpu" style="margin-left: 40px;background-color: #0088FF" value="每日客流量"  />
          </div>
          <div class="row_l" style="border-bottom:1px solid #E6E6E6;">
            <div class="clo_l">
              <span style="color:#FF9D04;font-size: 18px;font-weight: bold;margin-left: 20px;margin-top: 20px">2/台</span>
              <span class="gray_txt1">可以新增监控设备</span>
            </div>
            <input type="button" class="btn_inpu" style="margin-left: 80px;background-color: #FF9900" value="增加监控"  />
          </div>
        </div>

jiemain

Guess you like

Origin blog.csdn.net/Depressiom/article/details/123225843
Recommended