CSS3是Web前端開發中必不可少的技術之一，它可以實現豐富的效果，比如今天我們要講的紅包效果。

在HTML中，我們可以使用一個a標簽來作為紅包的容器，然后利用CSS3的偽元素before和after來實現紅包圖案的繪制。代碼如下：

.red-pack{
position: relative;
display: inline-block;
width: 50px;
height: 50px;
background-color: #f56c6c;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
color: #fff;
}
.red-pack:before, .red-pack:after{
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid #f56c6c;
top: -25px;
left: 0;
}
.red-pack:after{
top: 25px;
border-bottom: none;
border-top: 25px solid #f56c6c;
}

上面的代碼中，我們先定義了一個red-pack的類，它是紅包的容器。然后利用before和after偽元素繪制了紅包的三角形。其中，top和left屬性表示三角形繪制的位置和寬高。注意after偽元素需要對top和border-bottom做特殊處理，使得它在紅包下面。

最后，我們只需要在頁面中使用這個類即可：

<a href="#" class="red-pack">￥5</a>

效果如下：

最后，希望大家喜歡這個簡單的小效果，同時也能夠自由發揮CSS3的強大功能，創造更加炫酷的效果。