css 包含Text的CSS Triangle

Posted 2021-05-13

<div class="container">
  <div class="triangle"><span>20% Special Offer</span></div>
</div>

.container {
	width: 250px;
	height: 250px;
	position:relative;
	background-color:grey;
}

.triangle {
	width: 0; 
	height: 0; 
	border-top: 150px solid #ffcc00;
	border-bottom: 150px solid transparent;
	border-right: 150px solid transparent;
}

.triangle span {
	position:absolute;
	top: 35px;
	width: 100px;
	left: 5px;
	text-align: center;
	font-size: 16px;
	font-family: arial;
	transform: rotate(-45deg);
	display:block;
}