sanjeev shetty sanjeev shetty - 6 months ago 10
HTML Question

how can i get this black bar in css for calendar formed by a table

I have a calendar formed by a table. Let the table be having any css or no css.

Can you please make that masking effect in css.enter image description here

Answer

You can do this using pseudo-elements like in the below snippet. The bar can be thought of as having three parts - one cell where the bar starts, the one that are in the middle and the cell where it ends. By assigning the appropriate classes to the elements and by setting the required value to border-radius of the pseudo-elements, the bar can be created.

table {
  border: 1px solid black;
  border-collapse: collapse;
}
tr, td {
  border-bottom: 1px solid grey;
}
td {
  position: relative;
  height: 25px;
  width: 25px;
  padding: 10px;
  text-align: center;
}
td[class^='select'] {
  color: white;
}
td[class^='select']:before {
  position: absolute;
  content: '';
  height: calc(100% - 20px);
  width: calc(100% + 4px);
  background: black;
  top: 10px;
  z-index: -1;
}
td.select-mid:before {
  left: 0px;
}
td.select-start:before {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  left: 0px;
}
td.select-end:before {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  left: -4px;
}
td.select-start.select-end:before {
  left: 0px;
}
<table>
  <tr>
    <td>1</td>
    <td class='select-start'>2</td>
    <td class='select-mid'>3</td>
    <td class='select-end'>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>1</td>
    <td class='select-start'>2</td>
    <td class='select-mid'>3</td>
    <td class='select-mid'>4</td>
    <td class='select-end'>5</td>
  </tr>
  <tr>
    <td class='select-start'>1</td>
    <td class='select-mid'>2</td>
    <td class='select-mid'>3</td>
    <td class='select-mid'>4</td>
    <td class='select-end'>5</td>
  </tr>
  <tr>
    <td class='select-start'>1</td>
    <td class='select-end'>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td class='select-start select-end'>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>  
</table>