欢迎关注微信公众号：前端大神最近在项目中遇到这样的角标设计，如下，文字可以改变，自适应大小的布局自然是首选~下面来看看如何实现（两分钟看完）1、圆角矩形和三角形从设计上可以拆分成两部分，一个圆角矩形和一个三角形。假设HTML是这样的approvedaspassed圆角很容易实现，border-radius就可以了，如下tag{border-radius:4px4px4px0px;颜色：#fff；填充：2px6px；字体大小：10px；行高：16px；背景：#EA3447;}小三角形可以用伪元素生成。有很多方法可以实现三角形。如果对兼容性没有要求，建议使用clip-path。标签::之前{内容：'';位置：绝对；宽度：3px；高度：3px；左：0；底部：-3px；背景：#BB2A39；剪辑路径：多边形（00、100%0、100%100%）；/*Triangle*/}二、颜色较深的三角形上面的实现中，圆角矩形和三角形使用了两种颜色，分别是#EA3447和#BB2A39并且每次都要维护两个颜色变量太麻烦了，有没有办法使用只有一种颜色？换句话说，如何使颜色变暗？下面介绍几种方法1.覆盖一层半透明的黑色这个其实比较好理解。在原色上覆盖一层半透明的黑色，原色自然会变深。具体实现是用CSS背景画一个图层Translucentgradienttag::before{background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));background-color:inherit;}这里的background-color:Inherit表示背景色继承自parent。2.通过滤镜在cssfilter中有个亮点ness，您可以设置图像的亮度。亮度越高，图像越白。当它是无穷大时，它往往是白色的。亮度越低，图像越暗。为0时，图像全黑，刚好适合这个场景的具体实现tag::before{filter:brightness(.7);background-color:inherit;}像其他饱和度（saturate）和灰度（grayscale）滤镜一样可以达到类似的效果，但是这里亮度更合适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-col找到。..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%);}4.总结一下整体实现难度不大，如果设计者没有要求，其实第一步就可以完成。但是，如果将这些富有质感的设计全部还原，也能提升网站的整体视觉体验。下面总结了一些实现要点：尝试使用CSS实现自适应尺寸。建议实施三角形。Clip-path更容易理解，充分考虑了实现的可维护性。例如，如果你可以使用一个变量，就不要使用两个变量。CSS也以同样的方式堆叠。一层半透明的黑色会使图像变暗。也可以通过CSS滤镜亮度使图像变暗。以后也可以通过混色color-mix来实现。您可以提前了解背景混合模式，让颜色叠加以根据自然增强视觉。修复的小技巧你学会了吗？最后，如果觉得对你有好处和帮助，请点赞、收藏、转发???欢迎关注微信公众号：前端大侦探
