どのように私はテーブルで形成されたカレンダーのためのCSSのこの黒いバーを得ることができます

Question

私はテーブルによって形成されたカレンダーがあります。テーブルには、cssまたはcssがありません。

あなたはCSSでそのマスキング効果を作りますか？

Answer 1

これは、以下のスニペットのような擬似要素を使用して行うことができます。バーは3つの部分、つまりバーが始まる1つのセル、中央にあるセル、および終了するセルの3つの部分からなると考えることができます。要素に適切なクラスを割り当て、擬似要素の必要な値をborder-radiusに設定することによって、バーを作成することができます。

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>