Cacher is the code snippet organizer for pro developers

https://dot-blog.jp/news/css-frame-box-sample-code/
/*CSSでカギ括弧のデザインを表現する*/

.frame-box-001 {
	padding: 30px;
	position: relative;
}

.frame-box-001::before, .frame-box-001::after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}

.frame-box-001::before {
	border-left: solid 2px #000000;
	border-top: solid 2px #000000;
	top: 0;
	left: 0;
}

.frame-box-001::after {
	border-right: solid 2px #000000;
	border-bottom: solid 2px #000000;
	bottom: 0;
	right: 0;
}



/*SCSS*/
$bar-style: solid; 
$bar-size: 2px;
$bar-color: #000000;
.frame-box-001 {
	padding: 30px;
	position: relative;
	&::before, &::after {
	    content:'';
	    width: 30px;
	    height: 30px;
	    position: absolute;
	}
	&::before {
	    border-left: $bar-style $bar-size $bar-color;
	    border-top: $bar-style $bar-size $bar-color;
	    top: 0;
	    left: 0;
	}
	&::after {
	    border-right: $bar-style $bar-size $bar-color;
	    border-bottom: $bar-style $bar-size $bar-color;
	    bottom: 0;
	    right: 0;
	}
}