[ 基础系列 ] - CSS 小测 11

初心Yearth
341 阅读4分钟

系列文章

说在前面

本篇是张鑫旭老师的 CSS 基础测试11 的阅后笔记。

题目

先来看看题目：

img-00

分析

通常来说，要自绘制图标有以下几种方案：

  • border（IE8+）
  • 渐变（IE10+）
  • clip-path（非IE）
  • border-radius（IE9+）

关于图标绘制能说的太多，之前的小测笔记里也有大量提到过，这里就不过于深入，后面单开一章专门介绍一下。

这里大致介绍一下以上几种方案的优劣。

border

border 主要用来绘制三角形，优点是兼容性很好，缺点是无法使用百分比参数，不能自适应。

于本题，由于 top3 场景的顶部三角通常来说只需要考虑一个字符，所以可以使用 border。

渐变

渐变从理论上来说可以实现任何图案，原理是因为每一个像素点都可以通过渐变来绘制，如：

.gradient{
    background-size：1px 1px;
    background-image: liner-gradient(red, red);
}

上面的 css 就绘制了一个红色的像素点。

常用的渐变有：

  • linear-gradient
  • radial-gradient

弧形的图案可以使用 radial-gradient 来进行绘制，不过这个方案有个缺点是绘制出来的图形会有锯齿。

clip-path

clip-path 也是理论上可以实现任意图案的技巧，因为图形可以无限裁剪。于本题，除了兼容性意外，没有别的什么缺点。

这里是 clip-path 绘制工具，非常好用，有兴趣的同学可以去看看。

border-radius

border-radius 与 border 比较相似，通常来说用于实现圆弧，之前的 CSS 小测 - 03 有提到怎么通过 border-radius 绘制聊天气泡的小尾巴，有兴趣的同学可以去看看。

实现

关于 css 图形绘制还有别的方案，比如 transform: skewX 可以用于模拟三角，后面单开一张专门介绍 css 绘图，这里就不太偏题了，来讲讲题目的实现。

这里有一个小姿势有的同学可能不知道，如果是想实现关于父元素的左上角定位，position: relative，top: 0，left: 0 都是可以省略的，如下：

<section class="card">
  <div class="tag"></div>
</section>

.card {
    width: 300px;
    height: 400px;
    border: 1px solid deeppink;
}

.tag {
    position: absolute;
    width: 60px;
    height: 30px;
    background: deepskyblue;
}

效果如下：

img-01

效果一

这里没有什么值得一提的关键点，直接用文字撑开标签即可：

<div class="book">
  <span class="book-tag" tab-type="wrap">No.1</span>
  <img
    src="https://bookcover.yuewen.com/qdbimg/349573/1012237441/180"
    class="book-img"
  />
</div>

.book-tag {
    box-sizing: border-box;
    position: absolute;
    padding: 0.3em 0.5em;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #cd0000;
}

效果如下：

img-02

这里是在线 demo

效果二

这里分别使用 clip-path 和 linear-gradient 尝试实现。

clip-path

clip-path 在线绘制的工具使用可见下图：

img-03

直接复制网站给出的参数即可，代码如下：

[tab-type="triangle clip-path"] {
    padding: 0 0.3em;
    clip-path: polygon(100% 0, 0 0, 0 100%);
}

效果如下：

img-04

linear-gradient
[tab-type="triangle linear-gradient"] {
    padding: 0.3em 0.5em;
    background: linear-gradient(
      to right bottom,
      #cd0000 50%,
      transparent 50%
    );
}

效果如下：

img-05

这里是在线 demo

效果三

同样分别使用 clip-path 和 linear-gradient 尝试实现。

clip-path
[tab-type="trapezoid clip-path"] {
    padding: 0.1em 0.8em 0.2em 0.2em;
    clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%);
}

效果如下：

img-05

这里的切角通过 clip-path 还有更加优秀的实现方案，代码如下：

[tab-type="trapezoid clip-path"] {
    --pr: 0.8em;
    padding: 0.1em 0.8em 0.2em 0.2em;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--pr)) 100%, 0 100%);
}
linear-gradient
 [tab-type="trapezoid linear-gradient"] {
    padding: 0.1em 3em 0.1em 0.5em;
    background: linear-gradient(
      135deg,
      #cd0000 calc(100% - 2em),
      transparent 2em
    );
}

效果如下：

img-06

这里是在线 demo

效果四

效果四是弧形标签，需要注意的是，通过 clip-path 实现弧形的函数是 ellipse，而通过渐变实现弧形的函数是 radial-gradient。

clip-path

代码如下：

[tab-type="circle clip-path"] {
    min-width: 2em;
    height: 2em;
    padding: 0 0.8em 0 0.3em;
    clip-path: ellipse(100% 100% at 0% 0%);
}

效果如下：

img-07

radial-gradient
[tab-type="circle radial-gradient"] {
    padding: 0.1em 1em 0.4em 0.2em;
    background: radial-gradient(
      100% 100% ellipse at left top,
      #cd0000 100%,
      transparent 0
    );
}

效果如下：

img-08

可以看到，通过 radial-gradient 实现弧形，存在一定的锯齿。

这里是在线 demo

结束语

本期小测主要考察通过 css 绘制不同图案，以及被绘制出的图案的自适应性。而关于 css 绘制图案，可以讲的太多，所以就不在小测里介绍，后面会开单章专门介绍裁剪和渐变的绘制技巧。

avatar
文章
阅读
粉丝