Clarence-pan/0_product_discount_on_top_left_corner.html

## 0_product_discount_on_top_left_corner.html
<!doctype html>
<html>
  <head>
    <title>Product Discount On Top Left Corner</title>
    <style>
.product{
  border: 1px solid black;
  width: 400px;
  height: 300px;
  position: relative;
}
.discount{
  position:absolute;
  color: transparent;
  transform: rotate(-45deg);
  top: -2.88em;
  left: -2.2em;
}
.discount::before{
  content: attr(data-content);
  color: #fff;
  position: relative;
  z-index: 3;
  left: 1.2em;
  top: 3.7em;
}
.discount::after{
  content: '';
  display: block;
  border: 2.4em solid black;
  border-color:  transparent transparent black transparent ;
  width: 0;
  height: 0;
  position: relative;
  top: -1em;
  z-index: 1;
}
    </style>
  </head>
  <body>
    <div class="product">
      <div class="discount" data-content="77折"></div>
    </div>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Product Discount On Top Left Corner</title>
	<style>
	.product{
	border: 1px solid black;
	width: 400px;
	height: 300px;
	position: relative;
	}
	.discount{
	position:absolute;
	color: transparent;
	transform: rotate(-45deg);
	top: -2.88em;
	left: -2.2em;
	}
	.discount::before{
	content: attr(data-content);
	color: #fff;
	position: relative;
	z-index: 3;
	left: 1.2em;
	top: 3.7em;
	}
	.discount::after{
	content: '';
	display: block;
	border: 2.4em solid black;
	border-color: transparent transparent black transparent ;
	width: 0;
	height: 0;
	position: relative;
	top: -1em;
	z-index: 1;
	}
	</style>
	</head>
	<body>
	<div class="product">
	<div class="discount" data-content="77折"></div>
	</div>
	</body>
	</html>