最近在項(xiàng)目中碰到一個(gè)這樣的角標(biāo)設(shè)計(jì)，如下

像這種可以文字可變化，自適應(yīng)大小的布局，自然首選 CSS 了~下面看看如何實(shí)現(xiàn)的（兩分鐘讀完）

一、圓角矩形和三角形

從設(shè)計(jì)上可以拆分成兩部分，一個(gè)圓角矩形和一個(gè)三角形

假設(shè) HTML 是這樣的

<tag>審核為通過(guò)</tag>

圓角很好實(shí)現(xiàn)，border-radius就行，如下

tag{
  border-radius: 4px 4px 4px 0px;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 16px;
  background: #EA3447;
}

小三角可以用偽元素生成，關(guān)于三角形的實(shí)現(xiàn)方式有很多，如果對(duì)兼容性沒(méi)什么要求，建議采用clip-path實(shí)現(xiàn)，比較容易理解，確定三個(gè)坐標(biāo)，直接裁剪就可以了

用 CSS 實(shí)現(xiàn)就是

tag::before{
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    left: 0;
    bottom: -3px;
    background: #BB2A39;
    clip-path: polygon(0 0, 100% 0, 100% 100%); /*三角*/
}

二、顏色稍暗的三角形

上面的實(shí)現(xiàn)中，圓角矩形和三角形用了兩個(gè)顏色，分別是#EA3447和#BB2A39

每次都要維護(hù)兩個(gè)顏色變量太麻煩了，有沒(méi)有辦法只用一個(gè)顏色呢？換句話說(shuō)，如何將一個(gè)顏色變暗？這里有幾種方式

1. 遮蓋一層半透明的黑色

這個(gè)其實(shí)比較容易理解，在原有的顏色，遮蓋一層半透明的黑色，原有顏色自然就變暗了

具體實(shí)現(xiàn)就是用CSS背景繪制一層半透明漸變

tag::before{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
  background-color: inherit;
}

這里的background-color:inherit就表示背景顏色是繼承父級(jí)的

2. 通過(guò)濾鏡實(shí)現(xiàn)

CSS 濾鏡中有個(gè)brightness，可以設(shè)置圖像的亮度，亮度越高，圖像越白，無(wú)窮大時(shí)趨近于白色，亮度越低，圖像越黑，當(dāng)為0時(shí)，圖像就完全成黑色，剛好適用于這種場(chǎng)景

具體實(shí)現(xiàn)就是

tag::before{
  filter: brightness(.7);
  background-color: inherit;
}

像其他飽和度（saturate）、灰度（grayscale）濾鏡也能達(dá)到類似的效果，不過(guò)這里亮度更為合適

3.未來(lái)的解決方式 color-mix

大家可能在一些 CSS 預(yù)處理中用過(guò)顏色的處理方案，比如要把一個(gè)顏色亮度降低 20%，在 less 中可能是這樣

.el{
  background: darken(@color, 20%); 
}

不過(guò)這些是預(yù)處理的，變化并不是實(shí)時(shí)的，有時(shí)候可能并不能滿足實(shí)際需求。

現(xiàn)在，新的顏色方案已經(jīng)要在 CSS 中實(shí)現(xiàn)了，那就是 color-mix，也就是顏色混合，目前已經(jīng)在草案中了，如果未來(lái)全面支持了，那么要將一個(gè)顏色變暗，可以這樣來(lái)實(shí)現(xiàn)

.el{
  --accent: #EA3447;
  background: hsl(from var(--accent) h s calc(l - 20%));
}

這里的 from 表示將原有顏色展開(kāi)，然后重新計(jì)算成新的顏色

更多關(guān)于color-mix的草案可以查看 www.w3.org/TR/css-colo…

三、富有質(zhì)感的高光

設(shè)計(jì)師為了突出一定的質(zhì)感，在標(biāo)簽上和加了一層“微弱的高光”，上面的截圖可能不是特別清晰，可以看下面的放大對(duì)比圖

能看出區(qū)別嗎？能體會(huì)到設(shè)計(jì)的良苦用心嗎？

看著有些類似一個(gè)是純色填充，一個(gè)是漸變填充。為了保證顏色變量的單一性，這里的高光可以用一層半透明的白色漸變來(lái)實(shí)現(xiàn)

tag{
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) rgba(20, 30, 41, 0.76));
}

這里繪制了一個(gè)從左上角到右下角的半透明白色漸變，覆蓋在原本的顏色上，效果如下

由于只是簡(jiǎn)單粗暴的疊加，導(dǎo)致整體偏白，有種飽和度不足的感覺(jué)，究其原因，還是由于疊加的不夠自然。那么如何疊加的更為自然呢？可以采用background-blend-mode，也就是背景混合模式。

為了讓疊加效果看起來(lái)更加柔和，這里可以用soft-light，如下

tag{
  background-blend-mode: soft-light
}

這樣效果就好多了，非常精致，可以看看對(duì)比效果

完整代碼如下

tag{
  border-radius: 4px 4px 4px 0px;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 16px;
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), transparent) var(--bg, #EA3447);
  background-blend-mode: soft-light;
}
tag::before{
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  left: 0;
  bottom: -3px;
  background-color: inherit;
  filter: brightness(.7);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

四、總結(jié)一下

整體實(shí)現(xiàn)其實(shí)沒(méi)有太難的地方，如果設(shè)計(jì)師沒(méi)什么要求，其實(shí)到第一步就可以結(jié)束了。但是如果充分還原這些富有質(zhì)感的設(shè)計(jì)，也能讓網(wǎng)站整體的視覺(jué)感受更上一層樓。下面總結(jié)一些實(shí)現(xiàn)要點(diǎn)：

• 自適應(yīng)尺寸的盡量用 CSS 實(shí)現(xiàn)
• 三角的實(shí)現(xiàn)推薦 clip-path，更容易理解
• 充分考慮實(shí)現(xiàn)的可維護(hù)性，比如能用一個(gè)變量，就不要用兩個(gè)變量，CSS 同樣如此
• 疊加一層半透明的黑色可以實(shí)現(xiàn)圖像變暗
• 圖像變暗還可以通過(guò) CSS 濾鏡 brightness 實(shí)現(xiàn)
• 未來(lái)還可以通過(guò)顏色混合 color-mix 來(lái)實(shí)現(xiàn)，可以提前了解一下
• 背景混合模式可以讓顏色疊加根據(jù)自然

到此這篇關(guān)于CSS 實(shí)現(xiàn)角標(biāo)效果的文章就介紹到這了,更多相關(guān)CSS 實(shí)現(xiàn)角標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論