Как сделать декоративную таблицу

Question

Подскажите, как реализовать скос в правой нижней части таблицы и выемку снизу таблицы.

.requirements {
  background-color: #242424;
  padding: 20px;
}

.requirements__table {
  text-align: left;
  border-collapse: collapse;
  border-spacing: '0';
  background: transparent;
  max-width: 573px;
  display: block;
  margin: 0 auto;
}

.requirements__td {
  padding: 15px 20px 20px 20px;
  border: 1px solid #000;
  width: 50%;
}

.requirements__td-title {
  color: #FFB548;
  font-family: "Bebas Neue";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.requirements__td-text {
  color: #FFF;
  font-family: "Open Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}

  <div class="requirements">
          <table class="requirements__table">
            <tr class="requirements__tr">
              <td class="requirements__td">
                <p class="requirements__td-title">OS:</p>
                <p class="requirements__td-text">Windows 7 64-bit only (No OSX support at this time)
                </p>
              </td>
              <td class="requirements__td">
                <p class="requirements__td-title">pROCESSOR:</p>
                <p class="requirements__td-text">Intel Core 2 Duo @ 2.4 GHZ or AMD Athlon X2 @ 2.8 GHZ
                </p>
              </td>
            </tr>

            <tr class="requirements__tr">
              <td class="requirements__td">
                <p class="requirements__td-title">mEMORY:</p>
                <p class="requirements__td-text">8 GB RAM</p>
              </td>
              <td class="requirements__td">
                <p class="requirements__td-title">storage:</p>
                <p class="requirements__td-text">8 GB available space</p>
                <div class="hidden-block"></div>
              </td>
            </tr>
            <tr class="requirements__tr">
              <td class="requirements__td" colspan="2">
                <p class="requirements__td-title">GRAPHICS:</p>
                <p class="requirements__td-text">NVIDIA GeForce GTX 660 2GB or AMD Radeon HD 7850 2GB DirectX11 (Shader Model
                  5)</p>
              </td>
            </tr>
         </table>
  </div>

Answer 1

Я бы сделал это при помощи linear-gradient() отрисовав все эти срезы.

@import 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap';

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #fff;
  overflow: hidden auto;
  margin: 0;
}

.characteristics {
  width: 100%;
  max-width: 500px;
  border-collapse: collapse;
  box-sizing: border-box;
  --border-color: #666;
}

.characteristics td {
  border: 1px solid var(--border-color);
  padding: 10px;
  box-sizing: border-box;
}

.characteristics td:not([rowspan]) {
  width: 50%;
}

.characteristics tr:last-child td {
  border-right: 0;
  border-bottom: 0;
  background-image: 
    linear-gradient(var(--border-color), var(--border-color)), 
    linear-gradient(-45deg, transparent calc(50% - 0.5px), var(--border-color) calc(50% - 0.25px), var(--border-color) calc(50% + 0.25px), transparent calc(50% + 0.5px)), 
    linear-gradient(var(--border-color), var(--border-color)), 
    linear-gradient(45deg, transparent calc(50% - 0.5px), var(--border-color) calc(50% - 0.25px), var(--border-color) calc(50% + 0.25px), transparent calc(50% + 0.5px)), 
    linear-gradient(var(--border-color), var(--border-color)), 
    linear-gradient(-45deg, transparent calc(50% - 0.5px), var(--border-color) calc(50% - 0.25px), var(--border-color) calc(50% + 0.25px), transparent calc(50% + 0.5px)), 
    linear-gradient(var(--border-color), var(--border-color));
  background-repeat: no-repeat;
  background-position: 
    0 100%, 
    10% 100%, 
    calc(10% + 13.5px) calc(100% - 9px), 
    calc(20% + 9.5px) 100%, 
    calc(100% - 10px) 100%, 
    100% 100%, 
    100% 0;
  background-size: 
    10% 1px, 
    10px 10px, 
    10% 1px, 
    10px 10px, 
    calc(80% - 27.5px) 1px, 
    10px 10px, 
    1px calc(100% - 10px);
  padding-bottom: 30px;
}

.characteristics-title {
  display: block;
  font-weight: 900;
  color: #f5ae46;
  margin-bottom: 15px;
}

<table class="characteristics">
  <tr>
    <td>
      <div class="characteristics-title">OS:</div>
      <div class="characteristics-desc">Windows 7 64-bit only (No&nbsp;OSX support at&nbsp;this time)</div>
    </td>
    <td>
      <div class="characteristics-title">PROCESSOR:</div>
      <div class="characteristics-desc">Intel&nbsp;Core&nbsp;2&nbsp;Duo @ 2.4&nbsp;GHZ or AMD&nbsp;Athlon&nbsp;X2 @ 2.8&nbsp;GHZ</div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="characteristics-title">MEMORY:</div>
      <div class="characteristics-desc">8&nbsp;GB RAM</div>
    </td>
    <td>
      <div class="characteristics-title">STORAGE:</div>
      <div class="characteristics-desc">8&nbsp;GB available space</div>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="characteristics-title">GRAPHICS:</div>
      <div class="characteristics-desc">NVIDIA GeForce GTX 660 2GB or AMD&nbsp;Radeon&nbsp;HD&nbsp;7850&nbsp;2GB&nbsp;DirectX11&nbsp;(Shader Model&nbsp;5)</div>
    </td>
  </tr>
</table>

БЛОГ НА HUSL

Как сделать декоративную таблицу

Ответы (1 шт):