HTMLとCSSでボックスが重なった表現をする

先日変わったデザインのテキストボックスを作る機会があったのでメモ。

概要

・背景が透過したボックスがふたつ重なった形状
・文章量は可変

デモコード

HTML

<div class="c-boxs">
  <div class="c-boxs__item">テキストテキスト</div>
  <div class="c-boxs__item">テキストテキスト</div>
  <div class="c-boxs__item">テキストテキスト</div>
</div>

CSS

body{
  background: #92CAB8;  
}
.c-boxs{
  display: flex;
  justify-content: space-between;
	&__item{
		position: relative;
		display: block;
		width: 30%;
		min-height: 100px;
		padding: 10px;
		margin-right: 10px;
		background: rgba(240,240,240,.9);
		&::before{
			content: '';
			display: block;
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: -1;
			width: calc( 100% - 10px);
			height: calc( 100% - 10px);
			border-right: 10px solid rgba(220,220,220,.6);
			border-bottom: 10px solid rgba(220,220,220,.6);
		}
	}
}

工夫した点

はじめは単純にボックスをずらして重ねれば良いと思っていた。
しかし背景が透過のため、そのままだと重なりが見えてしまう。

そこで前面のボックスと同じものを用意し、その要素のボーダーで表現することにした。
地味にボーダーもアルファ効くの初めて知った。