JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<dl class="content">
	<dt class="head">Приветствие</dt>
	<dd class="body">Здравствуйте.</dd>
</dl>
<dl class="content">
	<dt class="head">Нестандартная рамка</dt>
	<dd class="body">Здравствуйте. Затрудняюсь реализовать момент-сделать блок так,чтобы border в слева наверх был обрезан. Данный метод представляю как делать но с белым фоном,а данная ситуация поставила меня в тупик. Приложил скриншот для наглядности.</dd>
</dl>

CSS

html{
	background:#369;
}
.content{
	overflow:hidden;
	position:relative;
	width:500px;
	margin:50px;
	padding:0 0 0 10px; /*Связано*/
	color:#fff;
}
.content .head{
	margin:0 0 0 -10px; /*Связано*/
	font-size:2em;
	white-space:nowrap;
}
.content .head:after{
	content:"";
	display:inline-block;
	width:100%;
	height:3px; /*Связано*/
	margin:0 0 0 10px; /*Связано*/
	vertical-align:middle;
	background:#fff;
}
.content .head:before{
	content:"";
	position:absolute;
	top:calc(1em + 10px); /*Связано*/
	bottom:0;
	left:10px; /*Связано*/
	width:3px; /*Связано*/
	background:#fff;
}
.content .body{
	margin:-1em 0 0;
	padding:30px;
	border-right:3px solid #fff; /*Связано*/
	border-bottom:3px solid #fff; /*Связано*/
	font-style:italic;
}