Slanted diagonal line in html or css?

by

Based on CSS3 linear-gradients solution except that the angle is not hard coded:

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>

More Related Contents:

  1. HTML5 / CSS3 Circle with Partial Border
  2. Border with a transparent centred arrow
  3. Create wavy borders in CSS for top and bottom borders
  4. How to make double border on left only with thick outside and thin inside [duplicate]
  5. Transparent half circle cut out of a div
  6. Curve bottom side of the div to the inside with CSS
  7. Can I create a div with a Curved bottom?
  8. How to make this arrow in CSS only?
  9. CSS Progress Circle
  10. border curved css – circle with curved end
  11. Elongated hexagon shaped button using only one element
  12. Circular percent progress bar
  13. How to create a curve between two gradient using CSS?
  14. How does this CSS produce a circle?
  15. Easier way to create circle div than using an image?
  16. How to draw a trapezium/trapezoid with css3?
  17. How to create a transparent triangle with border using CSS?
  18. Draw Circle using css alone [duplicate]
  19. How to add border to a container with transparent gaps in between
  20. How to make a border overlay child div?
  21. How can I create a wavy shape CSS?
  22. How to Make A Chevron Arrow Using CSS?
  23. Title with bottom border smaller than width
  24. CSS Zigzag Border with a Textured Background
  25. Square DIV where height is equal to viewport
  26. How to transform each side of a shape separately?
  27. Border around specific rows in a table?
  28. CSS Inset Borders
  29. Removing the Bevel Effect on the Corner of Borders
  30. How to create a ribbon shape in CSS

Leave a Comment