最近在项目中碰到一个这样的角标设计,如下
像这种可以文字可变化,自适应大小的布局,自然首选 css 了~下面看看如何实现的(两分钟读完)
一、圆角矩形和三角形
从设计上可以拆分成两部分,一个圆角矩形和一个三角形
假设 html 是这样的
<tag>审核为通过</tag>
圆角很好实现,border-radius
就行,如下
tag{ border-radius: 4px 4px 4px 0px; color: #fff; padding: 2px 6px; font-size: 10px; line-height: 16px; background: #ea3447; }
小三角可以用伪元素生成,关于三角形的实现方式有很多,如果对兼容性没什么要求,建议采用clip-path
实现,比较容易理解,确定三个坐标,直接裁剪就可以了
用 css 实现就是
tag::before{ content: ''; position: absolute; width: 3px; height: 3px; left: 0; bottom: -3px; background: #bb2a39; clip-path: polygon(0 0, 100% 0, 100% 100%); /*三角*/ }
二、颜色稍暗的三角形
上面的实现中,圆角矩形和三角形用了两个颜色,分别是#ea3447
和#bb2a39
每次都要维护两个颜色变量太麻烦了,有没有办法只用一个颜色呢?换句话说,如何将一个颜色变暗?这里有几种方式
1. 遮盖一层半透明的黑色
这个其实比较容易理解,在原有的颜色,遮盖一层半透明的黑色,原有颜色自然就变暗了
具体实现就是用css背景绘制一层半透明渐变
tag::before{ background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); background-color: inherit; }
这里的
background-color:inherit
就表示背景颜色是继承父级的
2. 通过滤镜实现
css 滤镜中有个brightness
,可以设置图像的亮度,亮度越高,图像越白,无穷大时趋近于白色,亮度越低,图像越黑,当为0时,图像就完全成黑色,刚好适用于这种场景
具体实现就是
tag::before{ filter: brightness(.7); background-color: inherit; }
像其他饱和度(saturate)、灰度(grayscale)滤镜也能达到类似的效果,不过这里亮度更为合适
3.未来的解决方式 color-mix
大家可能在一些 css 预处理中用过颜色的处理方案,比如要把一个颜色亮度降低 20%,在 less 中可能是这样
.el{ background: darken(@color, 20%); }
不过这些是预处理的,变化并不是实时的,有时候可能并不能满足实际需求。
现在,新的颜色方案已经要在 css 中实现了,那就是 color-mix
,也就是颜色混合,目前已经在草案中了,如果未来全面支持了,那么要将一个颜色变暗,可以这样来实现
.el{ --accent: #ea3447; background: hsl(from var(--accent) h s calc(l - 20%)); }
这里的 from 表示将原有颜色展开,然后重新计算成新的颜色