大家好

今天要繼續前一天的作法
用CSS畫鋸齒邊的圖

範例 郵票

background: radial-gradient( transparent, transparent 6px, #fff 6px, #fff )-10px -10px;
background-size: 20px 20px;

作出 鋸齒狀圓弧邊

再用 position: absolute 加上一張圖蓋掉中間的不希望看到的點就行了

若是要畫齒輪的話

圓形好像只能用一個一個的小圓
用 position: absolute 的方式遮住
找不到也想不出來要怎麼用 radial-gradient 做到

另外作內圓弧

background: 
    radial-gradient(circle at top left, transparent 15px, #FF6F00 0) top left,
    radial-gradient(circle at top right, transparent 15px, #FF6F00 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #FF6F00 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #FF6F00 0) bottom left;
background-size: 50% 50%;
background-repeat:no-repeat;

覺得這運用在門票上也滿不錯的

--- 明日待續。