css斜线

程序员玉宽技术 2022年11月19日

0 收藏 442 点赞 4,085 浏览 1719 个字

斜线

.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;
}
.demo2{
border-corner-shape: bevel;
border-radius: 0px 100% 0px 100.6%;
width:200px;
height:100px;
border:1px solid red;
}

     <div class="demo">
          <div class="inner">
             斜线
         </div>
    </div>
.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;
}
如果不支持，可见这里
     <div class="demo">
        <div class="innert">斜线</div>
    </div>
.demo2{
   border-corner-shape: bevel;
   border-radius: 0px 100% 0px 100.6%;
   border:1px solid red;
   width:200px;
   height:100px;
}