Epicpkmn11/left.png

## left.png

      
    Raw
  

              left.png
            
          
## right.png

      
    Raw
  

              right.png
            
          
## test.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sims Box Test</title>
	<style>
		* {
			box-sizing: border-box;
		}

		.box {
			background-color: #5a5a73;
			height: 102px;
			margin: 0 18px;
			width: calc(100% - 18px - 18px);
			border-top: 6px solid #393952;
			border-bottom: 6px solid #393952;
		}

		.box::before, .box::after {
			content: "";
			background-size: contain;
			height: 102px;
			width: 18px;
		}

		.box::before {
			background-image: url(left.png);
			margin-left: -18px;
			margin-top: -6px;
			float: left;
		}

		.box::after {
			background-image: url(right.png);
			margin-right: -18px;
			margin-top: -96px;
			float: right;
		}

		.box-inner {
			height: 90px;
			text-align: center;
			vertical-align: middle;
			line-height: 90px; /* for vertical centering */
			overflow: scroll; /* or hidden, otherwise the right side glitches */
			font-size: 4rem;
			color: white;
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- contenteditable makes it so you can type there for testing -->
		<div class="box-inner" contenteditable>
			testing!
		</div>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sims Box Test</title>
	<style>
	* {
	box-sizing: border-box;
	}

	.box {
	background-color: #5a5a73;
	height: 102px;
	margin: 0 18px;
	width: calc(100% - 18px - 18px);
	border-top: 6px solid #393952;
	border-bottom: 6px solid #393952;
	}

	.box::before, .box::after {
	content: "";
	background-size: contain;
	height: 102px;
	width: 18px;
	}

	.box::before {
	background-image: url(left.png);
	margin-left: -18px;
	margin-top: -6px;
	float: left;
	}

	.box::after {
	background-image: url(right.png);
	margin-right: -18px;
	margin-top: -96px;
	float: right;
	}

	.box-inner {
	height: 90px;
	text-align: center;
	vertical-align: middle;
	line-height: 90px; /* for vertical centering */
	overflow: scroll; /* or hidden, otherwise the right side glitches */
	font-size: 4rem;
	color: white;
	}
	</style>
	</head>
	<body>
	<div class="box">
	<!-- contenteditable makes it so you can type there for testing -->
	<div class="box-inner" contenteditable>
	testing!
	</div>
	</div>
	</body>
	</html>