创建单元格的对角线边框答案

【问题标题】：Create diagonal border of a cell创建单元格的对角线边框
【发布时间】：2013-03-21 14:19:10
【问题描述】：

我想知道是否可以使用 css 或 jquery 创建一个带有对角线边框的表格，如下所示：

任何想法都会受到赞赏。

【问题讨论】：

【解决方案1】：

这是表格中的示例，在 css 中带有边框和对角线 https://codepen.io/halimarm/pen/rNaPyGR?editors=1100

table {
  width: 100%;
}

table td {
  position: relative;
  overflow: hidden;
  border: 1px solid #000;
}

.line {
  position: absolute;
  height: 40px;
  top: 40px;
  bottom: 0;
  margin: auto;
  left: -5px;
  width: 100%;
  border-top: 1px solid #000;
  -webkit-transform: rotate(14deg);
  -ms-transform: rotate(14deg);
  transform: rotate(14deg); 
}

.diagonal {
  width: 150px;
  height: 40px;
}
.diagonal span.lb {
  position: absolute;
  bottom: 2px;
  left: 2px;
}
.diagonal span.rt {
  position: absolute;
  top: 2px;
  right: 2px;
}

<table>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td class="diagonal">
      <span class="lb">Rata - Rata</span>
      <span class="rt">Total</span>
      <div class="line"></div>
    </td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
  <tr>
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

正式的表格不能有对角线边框，但是通过一些 CSS 技巧你可以让它看起来像这样，这是代码..

.borderdraw {
position:fixed;
    border-style:solid;
    height:0;
    line-height:0;
    width:0;
    z-index:-1;

}

table td
    { 
        width:60px; 
            max-height:55px; 
        border:1px solid #000;
    }

.tag1{ z-index:9999;position:absolute;top:40px; }

.tag2 { z-index:9999;position:absolute;left:40px; }

.diag { position: relative; width: 50px; height: 50px; }
.outerdivslant { position: absolute; top: 0px; left: 0px; border-color: transparent transparent transparent rgb(64, 0, 0); border-width: 50px 0px 0px 60px;}
.innerdivslant {position: absolute; top: 1px; left: 0px; border-color: transparent transparent transparent #fff; border-width: 49px 0px 0px 59px;}                  
</style>

  <table>
    <tr>
      <td> 
    <div class = "tag1">Tag1</div>
    <div class="tag2">Tag2</div>

        <div style="z-index:-1;">
           <div class="diag">
             <div class="outerdivslant borderdraw">
             </div>

           <div class = "innerdivslant borderdraw">
           </div>
         </div>
        </div>

      </td>
    </tr>
</table>

这是输出。

希望对你有帮助。

【讨论】：

我只是匆忙创建了它，您可以随时根据需要对其进行格式化。这是实现风格的方法之一。

【解决方案3】：

只要你摆弄足够长的时间，一切皆有可能，这是一个使用一些创意边框和大量 CSS 的示例：

.arrow_box:after, .arrow_box:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

FIDDLE

另一个使用 CSS3 旋转：

-webkit-transform: rotate(26.5deg);
   -moz-transform: rotate(26.5deg);
    -ms-transform: rotate(26.5deg);
     -o-transform: rotate(26.5deg);
        transform: rotate(26.5deg);

FIDDLE

或者你可以只使用一张图片作为你的桌子的背景。

【讨论】：

好的，看起来不错。但实际上这应该以某种方式与文本一起使用（房间类型，款待）。 + 它应该可以在 IE 浏览器上正常工作。
如何在表格而不是 div 中应用这个？
关键是，没有简单的跨浏览器工作无处不在的方式来做到这一点，您需要做很多工作才能使其满足您的需求。唯一简单的解决方案是使用图像作为背景。
感谢 adeneo。最后，我将 image 用于对角线，将具有绝对位置的 div 用于 Hospitality 和 Room Type 标签。
在您的第二个示例中，您如何计算旋转后的位置？我的意思是行位置是top: 190px; left: 33px;。

【解决方案4】：

表格边框不能是对角线，你可以尝试使用一个元素（div）并旋转它（如果css3可以的话）

【讨论】：