JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<div class="info utf">Необходимо попробовать реализовать это средствами css.<br>Вопрос собственно заключается в том это реально вообще или нет.</div>
<div class="info base64 big">SVG</div>

CSS

.info{
	position:relative;
	box-sizing:border-box;
	width:400px;
	margin:0 0 40px;
	padding:40px;
	font-size:1.25em;
	color:#fff;
	background:0 0 / 100% 100% no-repeat;
}
.info.big{
	text-align:center;
	font-size:3em;
}
.info:before{
	content:"";
	position:absolute;
	z-index:-1;
	bottom:0;
	left:50%;
	width:40px;
	height:26px;
	margin:0 0 -5px -20px;
	background:rgb(214,73,73);
	transform: rotate(70deg) skew(50deg);
}
.info.utf{
	background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20" preserveAspectRatio="none"><path d="m0,0 a200,200,0,0,0,30,0 a150,150,0,0,0,0,20 a200,200,0,0,0,-30,0 a150,150,0,0,0,0,-20 z" fill="rgb(214,73,73)"/></svg>');
}
.info.base64{
	background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZD0ibTAsMCBhMjAwLDIwMCwwLDAsMCwzMCwwIGExNTAsMTUwLDAsMCwwLDAsMjAgYTIwMCwyMDAsMCwwLDAsLTMwLDAgYTE1MCwxNTAsMCwwLDAsMCwtMjAgeiIgZmlsbD0icmdiKDIxNCw3Myw3MykiLz48L3N2Zz4=');
}