在html或css中倾斜的对角线？

时间：2015-02-10 06:38:03

标签： html css css3 border css-shapes

我想制作一个像这样的表 CSS diagonale strike

是否可以在表中添加倾斜的对角线？

7 个答案:

答案 0 :(得分：15)

基于CSS3 linear-gradients解决方案，但角度不是硬编码的：

table:nth-of-type(1) td {
  background-image: linear-gradient(
    to top right,
    white 48%,
    black,
    white 52%
  );
}
table:nth-of-type(2) td {
  background-image: linear-gradient(
    to top right,
    papayawhip calc(50% - 1px),
    black,
    papayawhip calc(50% + 1px)
  );
}
/* for testing */
table {
  border-collapse: collapse;
  margin-top: 1em;
  margin-bottom: 1em;
}
td:nth-child(odd) {
  width: 10em;
}
td:nth-child(even) {
  width: 20em;
}
<table border="1">
  <tbody>
    <tr>
      <td>Narrow</td>
      <td>Wide</td>
    </tr>
    <tr>
      <td>Narrow</td>
      <td>Wide</td>
    </tr>
  </tbody>
</table>
<table border="1">
  <tbody>
    <tr>
      <td>Narrow</td>
      <td>Wide</td>
    </tr>
    <tr>
      <td>Narrow</td>
      <td>Wide</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分：4)

您可以使用以下任一方法生成此倾斜内边框效果，但两者都需要根据表格单元格的高度和宽度调整角度（倾斜/渐变）。

  

注意：当单元格尺寸为动态/自动时，这可能不是最佳选择（我也不能考虑任何其他更好的选项），因为角度需要修改。

选项1：在伪元素

上使用Skew Transform

＆＃13;
＆＃13; 
table,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
}
td {
  display: inline-block; /* doesn't seem to work in FF without this */
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px; /* for vertical centering */
}
td:after {
  position:absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  border: 1px solid red;
  -webkit-transform: skewX(63deg);
  -moz-transform: skewX(63deg);
  transform: skewX(63deg);
  -webkit-transform-origin: left bottom;
  -moz-transform-origin: left bottom;
  transform-origin: left bottom;
}
＆＃13; 
<table>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

选项2：在后台使用线性渐变（IE9及更低版本不支持）

＆＃13;
＆＃13; 
table,
tr,
td {
  border: 1px solid;
  border-collapse: collapse;
}
td {
  background: -webkit-linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  background: -moz-linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  background: linear-gradient(45deg, transparent 49%, black 49%, black 51%, transparent 51%);
  width: 50px;
  height: 50px;
}
＆＃13; 
<table>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
  <tr>
    <td>
      Test
    </td>
    <td>
      Test
    </td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：4)

另一种方法是使用 SVG ，因为它可以轻松扩展到容器的大小。

示例：

＆＃13;
＆＃13; 
div {
  position: relative;
  display:inline-block;
  width: 100px;
  height: 50px;
  border: 1px solid #000;
}
.l{width:200px;}
.xl{width:300px;}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
＆＃13; 
<div class="s">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>
<div class="l">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>
<div class="xl">
  <svg viewBox="0 0 10 10" preserveAspectRatio="none">
    <line x1="0" y1="0" x2="10" y2="10" stroke="black" stroke-width="0.2" />
  </svg>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：2)

如果这很有用，我为此创建了一个简单的HTML + CSS解决方案，只需要对单元格高度和颜色进行小的自定义：

https://codepen.io/davoscript/pen/GdWMwV 

.equilibrium{
  width: 100%;
  border: 1px solid #999;
  border-right: none;
  border-bottom: none;
  background: #8bc34a;
}

.equilibrium td{
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}

.equilibrium td{
  position: relative;
  height: 200px;
}

.equilibrium .sup{
  display: block;
  position: relative;
  width: 50%;
  float: left;
  padding-bottom: 15%;
  line-height: 100%;
  text-align: center;
  z-index: 1;
}

.equilibrium .inf{
  display: block;
  position: relative;
  width: 50%;
  float: left;
  padding-top: 15%;
  line-height: 100%;
  text-align: center;
  z-index: 1;
}

.equilibrium td::after{
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,.5);
  background-size: cover;
  clip-path: polygon(100% 0%, 0% 0%, 0% 100%);
}
<table class="equilibrium" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>
        <span class="sup">1</span>
        <span class="inf">2</span>
      </td>
      <td>
        <span class="sup">1</span>
        <span class="inf">2</span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="sup">1</span>
        <span class="inf">2</span>
      </td>
      <td>
        <span class="sup">1</span>
        <span class="inf">2</span>
      </td>
    </tr>
  </tbody>
<table>

希望它有所帮助。

答案 4 :(得分：0)

您可以添加transform-origin属性并更改翻译值

div.line
{
    position: relative;
    z-index: 1;
    left: -61px;
    width: 423px;
    height: 1px;
    background-color: #000;
    transform: rotate(45deg);
}

检查小提琴：http://jsfiddle.net/LWAKn/123/

让我知道你是否正在寻找别的东西

答案 5 :(得分：0)

可以使用js＆amp; CSS。请检查以下代码。

<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="myTextArea"></div>    
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

<style>
html, body { 
  margin: 0;
  padding: 0;
}

#myCanvas {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 100px;
}

#myTextArea {
  position: absolute;
  left: 0px;
  right: 0;
  height: 102px;
  width: 202px;
  background: rgba(255,255,255,0);
  padding: 0;
  margin: 0;
}
</style>


`

答案 6 :(得分：0)

您可以通过定义线性渐变来简单地指定对角线。

table td{
  border: 1px solid #ccc;
}

/* This will  be hidden, just to make the real line straight instead of dotted line */
td.diagonalCross{
     position:   relative;
     background:  linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%) !important;
     background-color: transparent;
     background-image: none !important;
}

/* The real diagonal line */
td.diagonalCross:after{
     content:     "";
     display:     block;
     position:    absolute;
     width:       100%;
     height:      100%;
     top:         0;
     left:        0;
     z-index:     -1;
     /* Rising diagonal line */
     background: linear-gradient(to right bottom, white, white 48%, black 49%, black 51%, white 52%, white) !important;
     /* Falling diagonal line */
     background: linear-gradient(to right top, white, white 48%, black 49%, black 51%, white 52%, white) !important;  
}
<table>
  <tr>
    <td>Name</td>
    <td>ID</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>Naveno</td>
    <td>ID-123</td>
    <td class="diagonalCross"></td>
  </tr>
  <tr>
    <td>Ho</td>
    <td >ID-223</td>
    <td class="diagonalCross"></td>
  </tr>
  <tr>
    <td>Lee</td>
    <td >ID-221</td>
    <td class="diagonalCross"></td>
  </tr>
  <tr>
    <td>Min</td>
    <td >ID-231</td>
    <td class="diagonalCross"></td>
  </tr>
</table>

JS Fiddle 链接 here。

相关问题
最新问题