jQuery 標籤雲：將矩形標籤改為五角星形狀的 CSS 實作

需求分析

原程式碼使用 border-radius: 6px 產生圓角矩形標籤，現需改為五角星形狀，且保留原有的隨機顏色、點擊切換選取等互動邏輯。

核心技術：CSS Clip-path 與 SVG Path

現代瀏覽器支援 clip-path: polygon(...) 直接剪裁五角星，無需圖片或複雜偽元素。五角星 10 個頂點座標（以 0~100% 為單位）如下：

clip-path: polygon(
  50% 0%,   /* 頂點 */
  61% 35%,
  98% 35%,
  68% 57%,
  79% 91%,
  50% 70%,
  21% 91%,
  32% 57%,
  2% 35%,
  39% 35%
);

完整改造步驟

1. 移除 border-radius 相關樣式。
2. 在 .cloud li 加入 clip-path 與 -webkit-clip-path。
3. 調整 padding 使文字置中於五角星可視區域。
4. 保留 hover、.Selected、.green、.blue 等狀態類別，僅改變 background-color 即可。

關鍵 CSS 差異片段

.cloud li {
    /* 移除 border-radius */
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    padding: 12px 8px; /* 視覺微調 */
    line-height: 1.2;
}

完整可執行範例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
ul,li{list-style:none;padding:0;margin:0}
.cloud{overflow:hidden;width:320px}
.cloud li{
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background:#fff; border:1px solid purple; color:purple;
    padding:12px 8px; margin:0 5px 5px 0; float:left;
    font:14px/1.2 "Microsoft JhengHei"; cursor:pointer;
}
.cloud li:hover,.cloud li.Selected{background:purple;color:#fff}
.cloud li.green{color:green;border-color:green}
.cloud li.green:hover,.cloud li.greenSelected{background:green;color:#fff}
.cloud li.blue{color:blue;border-color:blue}
.cloud li.blue:hover,.cloud li.blueSelected{background:blue;color:#fff}
</style>
</head>
<body>
<ul class="cloud" id="ul">
  <li>標籤1</li><li>標籤2</li><li>標籤3</li>
  <li>標籤4</li><li>標籤5</li><li>標籤6</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function rnd(min,max){return Math.floor(Math.random()*(max-min+1)+min);}
var arr=['','blue','green'];
$('#ul li').attr('cls',function(){return this.className=arr[rnd(0,arr.length-1)];})
.click(function(){
    var cls=this.getAttribute('cls'),
        isSelected=this.className.indexOf('Selected')!=-1;
    this.className=isSelected?cls:cls+' '+cls+'Selected';
});
function getTags(){
    var tags=$('#ul li[class*="Selected"]').map(function(){return this.innerHTML}).get().join('、');
    alert(tags);
}
</script>
</body>
</html>

相容性備註

• clip-path: polygon() 支援 Chrome 24+、Firefox 54+、Safari 10+、Edge 79+。
• IE 不支援，若需相容 IE 可改用 SVG <clipPath> 或背景圖片方案。

結語

單純以 CSS clip-path 即可將矩形標籤轉為五角星，零圖片、零額外 DOM、動畫效能佳，且完整保留原有 jQuery 互動邏輯。