css 实现 '凹凸曼' 等图形 👀

用css能实现不少图形，自己稍作整理，希望能对大家有所帮助， 献上 ‘凹凸曼’ 的图 👇

凹凸

👀 额是不是跟想象中的不太一样

主要是利用了最小宽度
- 东方文字为单个字符
- 西方文字最小宽度由特定的连续的英文字符单元决定遇到空格 '-' '?' 这三个会换行其他的没试不敢瞎说

小二，上具体代码

// 提供下 凹 的代码
.ao{
  display: inline-block;
  width: 0;  // 很关键
  font-size: 14px;
  line-height: 18px;
  margin: 35px;
  color: #fff;
}
.ao:before {
  outline: 2px solid #cd0000;
}
.ao:before {
  content: "love你love";
}

<span class="ao"></span>

更多具体的代码请使劲戳我

实际展示如下图 👇

三角形

这个应该见的比较多我介绍一下我所了解的3种解法
1 使用border 有几个被忽略的点
- 不加宽高限制条件时候的 border 在块级元素跟内联元素是怎么表现的
- 块元素仅加 width:0
- 内联元素仅加 display: inline-block;
2 使用 clip-path 详情带你 mdn clip-path
3 使用元素的层叠遮挡主要用到

具体效果如下图 👇

具体的示例代码戳我👇进行体验

实现加载动画效果

小二，再上个截图，目前没接触录制的软件下次一定！具体的戳我👇体验

个人刚觉就两个关键点
- 视觉上的形成（大概是万能的 border）
- 一直转的功能 (animation 传送至 mdn animation)

.loading {
  width: 40px;
  height: 40px;
  border: 10px solid lightblue;
  border-radius: 50%;
  border-top-color: transparent;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="loading"></div>

这里感觉loading 的图形的实现方式可能还有其他（渐变加 mask 。。。）

最后

第一个的‘凹凸曼’例子来自张鑫旭老师的《css世界》, 很棒的书籍。祝大家中秋快乐～