CSS斜线
浏览数：17 /
时间：2015年06月09日
<style>
.demo{
display: inline-block;
width: 400px;
height: 100px;
resize: both;
overflow: auto;
margin-top: 30px;
background: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(49.9%, transparent), color-stop(49.9%, green), color-stop(50.1%, green), color-stop(50.1%, transparent));
background: -webkit-linear-gradient(to top right, transparent 49.9%, green 49.9%, green 50.1%, transparent 50.1%);
background: -moz-linear-gradient(to top right, transparent 49.9%, green 49.9%, green 50.1%, transparent 50.1%);
background: -o-linear-gradient(to top right, transparent 49.9%, green 49.9%, green 50.1%, transparent 50.1%);
background: linear-gradient(to top right, transparent 49.9%, green 49.9%, green 50.1%, transparent 50.1%);
background-repeat: no-repeat;
border:1px solid #999;
}
</style>
<div class="demo">
<div class="inner">
斜线
</div>
</div>
如果不支持，可见这里
<style>
.demo{
border-corner-shape: bevel;
border-radius: 0px 100% 0px 100.6%;
border:1px solid red;
width:200px;
height:100px;
}
</style>
<div class="demo">
<div class="inner">
斜线
</div>
</div>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
