CSS制作一個播放圖標

/*定義播放圖標容器的樣式*/
.play-icon {
width: 50px;
height: 50px;
background-color: #FF0000;
border-radius: 30px;
position: relative;
}
/*繪制三角形圖形即播放按鈕*/
.play-icon::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #FFFFFF;
position: absolute;
left: 18px;
top: 15px;
}
/*給播放按鈕添加圓形背景*/
.play-icon::before {
content: "";
width: 10px;
height: 10px;
background-color: #FFFFFF;
border-radius: 50%;
position: absolute;
left: 20px;
top: 20px;
}

以上代碼使用偽元素和絕對定位來繪制播放圖標，通過content屬性生成偽元素來增加圖標元素，利用邊框樣式和顏色巧妙地繪制出一個三角形，給三角形添加位置定位，便于調整其位置。在此基礎上使用前景色設置一個小圓點，就可以組合成一個完整的播放圖標了。該播放圖標的容器可以靈活設置寬高，并且通過修改背景色，可以實現不同樣式的播放圖標。