W3C css-images-4 3.5.2. Example

by PhilQ

HTML

<div class="default-hint"></div>
<div class="hint-info">Mid-color</div>
<div class="custom-hint"></div>

CSS

.default-hint {
	width: 300px;
	height: 80px;
	background: linear-gradient(to right, red 0%, blue 100%);
}
.custom-hint {
	width: 300px;
	height: 80px;
	background: linear-gradient(to right, red 0%, 25%, blue 100%);
}
.hint-info {
	position: relative;
	width: 300px;
	height: 40px;
	box-sizing: border-box;
	background: purple;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 14px 0px;
}
.hint-info::before {
	content: '';
	position: absolute;
	left: calc(50% - 8px);
	top: 4px;
	display: inline-block;
	box-sizing: border-box;
	width: 16px;
	height: 8px;
	border-style: solid;
	border-color: transparent;
	border-width: 8px;
	border-top: 0px;
	border-bottom: 8px solid rgba(255, 255, 255, 0.5);
}
.hint-info::after {
	content: '';
	position: absolute;
	left: calc(25% - 8px);
	bottom: 4px;
	display: inline-block;
	box-sizing: border-box;
	width: 16px;
	height: 8px;
	border-style: solid;
	border-color: transparent;
	border-width: 8px;
	border-bottom: 0px;
	border-top: 8px solid rgba(255, 255, 255, 0.5);
}