CSS基础测试12 - 徽章

[JaimeCheng]

题目：

原issue

回答：

/* 我的回答 */
.cover {
  position: relative;
  display: inline-block;
}
.cover img {
  width: 120px;
  height: 160px;
}
.tag {
  color: #fff;
  font-size: 12px;
  position: absolute;
}
.tag1 {
  padding: 4px 6px;
  top: 0;
  left: 0;
  line-height: 1;
  background: #cd0000;
}
.tag2 {
  z-index: 0;
  padding: 1px 5px;
}
.tag2::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: -0;
  border: 15px solid transparent;
  border-top: 15px solid #cd0000;
  border-left: 15px solid #cd0000;
}
.tag3 {
  padding: 0 6px;
  line-height: 22px;
  z-index: 0;
}
.tag3::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 0;
  border-width: 0px 8px 22px 0px;
  border-style: none solid solid;
  border-color: transparent transparent #cd0000;
  transform: scale(1, -1)
}
.tag4 {
  width: 25px;
  height: 25px;
  line-height: 22px;
  padding: 0px 6px;
  background: #cd0000;
  border-radius: 0px 0px 25px 0px;
  box-sizing: border-box;
}
.tag5 {
  width: fit-content;
  height: 25px;
  line-height: 20px;
  padding: 0px 10px 0 6px;
  background: #cd0000;
  border-radius: 0 0 100% 0;
  box-sizing: border-box;
}

满分回答1 | 满分回答2 | 满分回答3 | 满分回答4

总结：

1. css实现各种图标图形有一直不太擅长；
2. 第三题的图形不能自适应文字高度等；
3. 第4题没弄清题意，两个应该是一道题，根据内容长度自动变椭圆；
4. 自己实现出来的方法不够简单；

> 在线demo <

[JaimeCheng]

本期要点：

1. border三角（IE8+），渐变（IE10+），clip-path裁剪（非IE），border-radius圆角（IE9+）。
2. 左上角定位时候，不需要父元素relative，也不需要top, left指定。
3. clip-path: polygon配合百分比定位以及calc非常强，很多图形（图标，字母，文字）都可以使用这样的方式实现，尺寸任意适配。唯一需要注意的就是兼容性。1/4圆裁剪：clip-path: ellipse(100% 100% at 0% 0%);
4. 其他实现：border三角，问题，虽然兼容性好，但是不支持百分比宽度，这就导致无法自动适配尺寸（要么无法适应内容，要么无法使用其他图形-例如文字的色块背景）。
5. skewX模拟三角是很棒的实现，因为可以高度自适应。
6. 渐变是万能图形绘制方法，理论上，任意的图形都可以使用渐变见绘制，因为background-size和多背景。例如彩色照片，每一个像素点（例如红色 ）可以background-size：1px 1px; background-image: liner-gradient(red, red), ...。 本题实现的优点：1. CSS简介，不需要伪元素；2. 兼容性足够，IE10+；3. 方便灵活。可以参考wingmeng的实现。 包括圆弧也是可以使用渐变的，径向渐变。参见XboxYan的实现。
7. border-radius实现1/4圆：border-bottom-right-radius: 100%;