用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>
版权声明:本文为Depressiom原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。