CSS小程序已經成為了許多人的新寵。它可以讓頁面更加豐富多彩，也能夠更好的提升用戶體驗。在這篇文章中，我將帶領大家一起學習制作CSS小程序的方法。

div{
width: 300px;
height: 300px;
background-color: #4286f4;
position: relative;
border: 1px solid black;
}

首先我們需要一個div元素，它是一個基本的容器，可以進行各種樣式的設置。接下來我們給div一個寬度、高度和背景顏色，并設置邊框。

div:before{
content:'';
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
position: absolute;
left: -50px;
top: 0;
}

現在我們需要在div中添加一個三角形。通過偽元素:before來實現，其中content設置為空，用border來構造三角形。border-top設置紅色，border-right用transparent來隱藏顏色。并設置絕對定位，left和top表示在左上角的位置。

div:after{
content:'';
width: 0;
height: 0;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
position: absolute;
right: -50px;
bottom: 0;
}

同樣的，我們需要在另一側也添加一個三角形。與之前的偽元素相同，只是left改為了right，top改為了bottom。

div span{
display:block;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
color: #fff;
font-size: 30px;
}

最后，我們在div中添加一個span元素，并設置為塊狀元素。將它放在div的中央位置，并使用transform來使它在水平和垂直方向上都有一定的偏移。設置顏色和字體大小。

經過以上的步驟，我們就成功的制作了一個CSS小程序。希望這篇文章對大家有所幫助，也歡迎大家在評論區中分享你們的經驗和想法。