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

最新推荐文章于 2023-12-27 10:00:31 发布

weixin_30810583

最新推荐文章于 2023-12-27 10:00:31 发布

阅读量505

点赞数

原文链接：http://www.cnblogs.com/Begin-Vic/p/7724966.html

版权

HTML

1 <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;
}

转载于:https://www.cnblogs.com/Begin-Vic/p/7724966.html