JSFiddle - React, Tailwind, and code Playground

by fest1val

HTML

<div class='box angle'>
  <div class='box__text'>
    Blah blah blah
  </div>
</div>

CSS

.box {
  color: #fff;
	display: flex;
	font-size: 20px;
	font-weight: 500;
	width: 200px;
  height: 200px;
}

.box__text {
  display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding-left: 40px;
}

.angle {
	overflow: hidden;
	position: relative;
}

.angle:before {
	position: absolute;
	height: 70px;
	width: 55px;
	transform: rotate(45deg);
	margin: -30px;
	content: "";
  box-shadow: 0 0 0 1200px #0068aa;
}