如何使用css伪类，实现div左上角出现封面等提示信息

 HTML

<div class="ui-cover-tip”><div> 

CSS

.ui-cover-tip{
  position: relative;
  width: 200px;
  height: 200px;
  border: solid 1px red;
}
.ui-cover-tip:before{
  content:'';
  position: absolute;
  display:block;
  width: 0;
  height: 0;
  border-top: 45px solid #37c2a6;
  border-right: 45px solid transparent;
  z-index: 99;
}
.ui-cover-tip:after{
  content:'封面';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 40px;
  display: inline-block;
  transform: rotate(-45deg);
  color:#fff;
  z-index: 100;
}