¿Línea diagonal inclinada en html o css?

css3 border

Question

Quiero hacer una mesa como esta

¿Es posible agregar un borde diagonal inclinado en la tabla?

Answer 1

Basado en la solución de gradientes lineales CSS3 , excepto que el ángulo no está codificado:

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>

Answer 2

En caso de que esto sea útil, creé una solución HTML + CSS simple para esto que solo necesita una pequeña personalización de la altura y los colores de las celdas:

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>

Espero que ayude a alguien.

Answer 3

Es posible usando js & css. Por favor revise el código a continuación.

<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>
`

Answer 4

Otro enfoque sería usar SVG, ya que puede escalar fácilmente al tamaño de su contenedor.

Ejemplo:

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%;
}

<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>

Answer 5

Puede producir este efecto de borde interno inclinado utilizando cualquiera de los métodos a continuación, pero ambos necesitan que los ángulos (inclinación / gradiente) se ajusten en función de la altura y el ancho de la celda de la tabla.

Nota: Esta podría no ser la mejor opción (y tampoco puedo pensar en ninguna otra opción mejor) cuando las dimensiones de la celda son dinámicas / automáticas, ya que los ángulos necesitarían modificación.

Opción 1: uso de Skew Transform en un pseudo-elemento

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;
}

<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>

Opción 2: Uso de degradados lineales en segundo plano (no es compatible con IE9 y versiones inferiores)

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;
}

<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>

Answer 6

puede agregar la propiedad transform-origin y cambiar el valor de traducción

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

Verifique el violín: http://jsfiddle.net/LWAKn/123/

avísame si buscas algo más