console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
		.crBox {
			position: relative;
			width: 332px;
			height: 107px;

		}

		.crBox::after {
			content: "";
			position: absolute;
			width: 100px;
			height: 107px;
			background: linear-gradient(180deg, #46BAFA 0%, #4D69FF 100%);
		}

		.crBox::before {
			content: "";
			position: absolute;
			width: 302px;
			height: 107px;
			right:0;
			background: linear-gradient(180deg, #46BAFA 0%, #4D69FF 100%);
			transform: skewX(28deg);
			border-radius: 18px 18px 0 0;
		}
	</style>
</head>

<body>

	<div class="crBox">

	</div>

</body>

</html>