css画div对角线

原创

治电小白菜

修改于 2020-09-07 10:22:27

6K0

修改于 2020-09-07 10:22:27

文章被收录于专栏：技术综合技术综合

最近想实现带对角线的表头, 所以就使用css的background的linear-gradient来画

实验

先画个正方形

<style>



.block {



  width: 200px;



  height: 200px;



}



</style>







<div class="block"></div>

画对角线

使用线性渐变, 因为是正方形, 所以是45度角

.block {

    background: linear-gradient(45deg, transparent 49.5%, #fff000 50.5%, #fff000 50.5%, transparent 50.5%);

}

代码链接

https://codepen.io/klren0312/full/zYqPVXZ

表格对角线

<style>

  .line {

  padding: 20px 0;

  position: relative;

  background: linear-gradient(11deg, transparent 48.5%, #ff0000 49.5%, #ff0000 36.5%, transparent 51.5%);

}



.top,

.bottom{

  position: absolute;

}



.top {

  top: 0;

  right: 20px;

}



.bottom {

  bottom: 0;

  left: 20px;

}

</style>





<table border>

  <thead>

    <tr>

      <th>test1</th>

      <th class="line" width="200px">

        <div class="top">t1</div>

        <div class="bottom">t2</div>

      </th>

    </tr>

  </thead>

</table>