css画div对角线

时间:2022-07-24

本文章向大家介绍css画div对角线，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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

实验

先画个正方形

image.png

<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%);

}

image.png

代码链接

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>

image.png

随机文章

WEB前端知识点必读