<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> .slash { width: 100px; height: 50px; position: relative; background-color: #666; border: 2px solid #666; } .slash::before { content: ""; display: inline-block; position: absolute; top: 0; right: 0; border-top: 50px solid #fff; border-left: 100px solid transparent; } .slash::after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; border-bottom: 50px solid #fff; border-right: 100px solid transparent; } </style> </head> <body> <table> <tbody> <tr> <td class="slash"></td> <td class="slash"> <span style="position: absolute;left: 6px;bottom: 4px;z-index: 1;color: #666;">aaa</span> <span style="position: absolute;right: 6px;top: 4px;z-index: 1;color: #666;">bbb</span> </td> </tr> </tbody> </table> </body> </html>
原文：https://www.cnblogs.com/ak2cy/p/14742563.html