最近在一个项目中遇到这样的角标设计，如下：像这样的设计稿可以改变文字，适应布局的大小，自然是首选CSS~来看看怎么做实现（两分钟阅读）1.圆角矩形和三角形在设计上可以拆分成两部分，一个圆角矩形和一个三角形圆角矩形和三角形假设HTML是这样的。审核通过圆角实现的很好，border-radius很好，如下：tag{border-radius:4px4px4px0px;颜色：#fff；填充：2px6px；字体大小：10px；行高：16px；背景：#EA3447;}可以使用伪元素生成小三角形。有很多方法可以实现三角形。如果对兼容性没有要求，建议实现clip-path，更容易理解。确定三个坐标，直接切割即可。剪辑路径是用CSS实现的。标签::之前{内容：'';位置：绝对；宽度：3px；高度：3px；左：0；底部：-3px；背景：#BB2A39；剪辑路径：多边形（00、100%0、100%100%）；/*Triangle*/}二、颜色较深的三角形上面的实现中，圆角矩形和三角形使用了两种颜色，分别是#EA3447和#BB2A39。稍微深一点的颜色，每次都要维护两个颜色变量，太麻烦了。有没有办法只使用一种颜色？换句话说，如何使颜色变暗？这里有几种方法。1.蒙上一层半透明的黑色，其实更容易看懂。在原色上覆盖一层半透明的黑色，原色自然会变深。半透明黑色的具体实现是使用CSS背景绘制一层半透明渐变。tag::before{背景：线性渐变（rgba（0,0,0,0.3），rgba（0,0,0,0.3））;background-color:inherit;}这里的background-color:inherit表示背景色继承自父级。2.通过滤镜，css滤镜中有个brightness，可以设置图片的亮度。亮度越高，图像越白。当它是无穷大时，它趋于白色。亮度越低，图像越暗。当它为0时，图像会更亮。全黑，正好适合这个场景。CSSfilter的具体实现是：tag::before{filter:brightness(.7);background-color:inherit;}和其他饱和度（saturate）一样，灰度（grayscale）滤镜也可以达到类似的效果，只是这里用Brightness更合适。3.未来的解决方案color-mix你可能在一些CSS预处理中使用过颜色处理方案，比如将一种颜色的亮度降低20%，less中可能就是这样。.el{背景：变暗（@color，20%）；然而，这些都是经过预处理的，变化不是实时的，有时可能不能满足实际需要。现在，新的配色方案要在CSS中实现，也就是color-mix，也就是混色，目前还在草案中。如果以后完全支持，那么如果你想加深一个颜色，你可以这样做。.el{--accent:#EA3447;background:hsl(fromvar(--accent)hscalc(l-20%));}这里的from是指将原来的颜色展开，然后重新计算成新的颜色。更多关于颜色混合的草稿可以在https://www.w3.org/TR/css-color-5/#relative-HSL找到。3.纹理高亮设计器在标签中添加了一层“弱高亮”，以突出某种纹理。上面的截图可能不是特别清楚。您可以在下面放大的比较图中看到纹理高光的差异吗？你能感受到设计的良苦用心吗？它看起来有点类似于纯色填充和渐变填充。为了保证颜色变量的统一，这里的高亮可以用一层半透明的白色渐变标签实现{background:linear-gradient(torightbottom,rgba(255,255,255,0.4),transparent)rgba(20,30,41,0.76));}这里从左上角到右下角画了一个半透明的白色渐变，覆盖了原来的颜色，效果如下。一种饱和度不够的感觉，原因是叠加的不够自然。那么如何叠加更自然呢？可以使用background-blend-mode，也就是背景混合模式。为了让叠加效果看起来更柔和，这里可以使用soft-light，如下：tag{background-blend-mode:soft-light}这样效果就好多了，很细腻，大家可以看看对比效果。背景混合对比的完整代码如下：tag{border-radius:4px4px4px0px;颜色：#fff；填充：2px6px；字体大小：10px；行高：16px；背景：线性渐变（到右下角，rgba（255、255、255、0.4），透明）var（--bg，#EA3447）；背景混合模式：柔光；}tag::before{content:'';位置：绝对；宽度：3px；高度：3px；左：0；底部：-3px；背景色：继承；过滤器：亮度（.7）；clip-path:polygon(00,100%0,100%100%);}四、综上所述，整体实现起来其实并不算太难。如果设计者没有要求，第一步其实就可以结束了。但是，如果将这些富有质感的设计全部还原，也能提升网站的整体视觉体验。下面总结了一些实现要点：自适应尺寸尽量用CSS来实现。triangle的实现推荐clip-path，更容易理解。充分考虑实现的可维护性。例如，如果可以使用一个变量，就不要使用两个变量。CSS也是如此。可以通过覆盖一层半透明的黑色来使图像变暗。图像变暗也可以通过CSS过滤器亮度来实现。以后也可以通过混色color-mix来实现，大家可以提前了解一下。背景混合模式允许根据自然颜色叠加。
