表格中斜线的处理

最新推荐文章于 2025-04-04 11:43:07 发布

smouns_

最新推荐文章于 2025-04-04 11:43:07 发布

阅读量346

点赞数 2

文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/smouns_/article/details/138349718

版权

本文探讨了IT技术的最新进展，重点关注云计算、数据分析和人工智能在当今数字化转型中的关键角色，以及它们对企业和社会的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此处的斜线,不是用表格写的,但是也适用于表格,只是需要更改表格的样式,可以按照如下处理,即可

呈现的效果:如图所示

template部分:

<div class="header_detail custom">
          <div class="right">节次</div>
          <div class="left">教室</div>
          <div class="line"></div>
        </div>

css部分:

.custom {
        width: 70px;
        position: relative;
        color: rgba(255, 255, 255, .6);
        cursor: default;

        .left {
          position: absolute;
          left: 7px;
          bottom: 5px;
        }

        .right {
          position: absolute;
          right: 7px;
          top: 5px;
        }

        .line {
          position: absolute;
          top: 2px;
          left: 1px;
          width: 1px;
          height: 82px;
          transform: rotate(-55deg); /*这里需要自己调整，根据线的位置*/
          -webkit-transform-origin: top;
          transform-origin: top;
          background-color: #fff;
        }
      }