zoukankan html css js c++ java

斜线表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .diag, .override {
      width: 100px;
      height: 100px;
      position: relative;
      background-color: transparent;
    }

    .diag:before {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      border-bottom: 100px solid black;
      border-right: 100px solid transparent;
      content: "";
    }

    .diag:after {
      position: absolute;
      left: 0;
      right: 1px;
      top: 1px;
      bottom: 0;
      border-bottom: 99px solid white;
      border-right: 99px solid transparent;
      content: "";
    }
    table{
      border: 1px solid #000000;
      border-collapse: collapse;
    }
    table td {
      border: 1px solid #000000;
    }
  </style>
</head>
<body>
<table>
  <tr>
    <td>
      <div class="diag"></div>
      <div class="override" style="top:0px;left:0px;position: absolute;">
        <span style="top:70px;left:20px;position: absolute;" >123</span>
        <span style="top:20px;left:70px;position: absolute;" >456</span>
      </div>
    </td>
    <td>1</td>
  </tr>
</table>
</body>
</html>

查看全文

相关阅读:
Linux内存分析
 mysql 分表
 安装YCM
c/c++ 之静态库
 ubuntu20 宽带连接
 数据对齐
 计算机中浮点数的表示
 整数的表示
 信息的储存
 SparseTable ST表

原文地址：https://www.cnblogs.com/ronle/p/12931053.html