CSS基础测试12：图片角标

[wingmeng]

题目：

---

我的回答：

> 在线 Demo <

.books {
  display: flex;
  flex-flow: wrap;
}

.book-item {
  margin: 5px;
  text-decoration: none;
}

.book-item > .tag {position: absolute;}

.book-item > img {
  display: block;
  width: 120px;
  height: 160px;
}

.tag {
  display: inline-block;
  padding: 3px 5px;
  box-sizing: border-box;
  line-height: 1.2;
  font-size: 12px;
  color: #fff;
  background: #cd0000;
}

.tag-top {
  width: 28px;
  height: 28px;
  padding: 2px 4px;
  background: linear-gradient(135deg, #cd0000 50%, transparent 0);  
}

.tag-hot {
  padding-right: 12px;
  padding-bottom: 4px;
  background: linear-gradient(114deg, #cd0000 calc(100% - 8px), transparent 0);
}

.tag-number {
  min-width: 26px;
  min-height: 26px;
  padding-right: 11px;
  border-bottom-right-radius: 100%;
}