css 是層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。 CSS不僅可以靜態修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力。
下面就幾個小案例來教大家如何用css繪製一些圖形：
<style>
#triangle { width: 0; border-style: solid; border-width: 50px 50px 50px 50px; border-color: red blue orange gray;
}</style><div id="triangle"></div>效果如圖：
<style>
#triangle2 { width: 0; border-style: solid; border-width: 50px 50px 50px 50px; border-color: red red grey grey;
}</style><div id="triangle2"></div>效果如圖：
<style>
#triangle3 { width: 0; border-top: 60px solid transparent; border-right: 100px solid transparent; border-bottom: 80px solid red;
}</style><div id="triangle3"></div>效果如圖：
<style>
#triangle4 { width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}</style><div id="triangle4"></div>效果如圖：
繪製心形
<style>
#heart { float: left; width: 100px; height: 90px; position: relative;
} #heart:before,#heart:after { position: absolute; top: 0; content: ''; width: 50px; height: 80px; background: red; border-radius: 25px 25px 0 0;
} #heart:before { left: 14px; transform: rotate(-45deg);
} #heart:after { left: 36px; transform: rotate(45deg);
}</style><div id="heart"></div>效果如圖：
#繪製箭頭
<style>
#arrow { margin-top: 105px; float: left; width: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 60px solid red; position: relative;
} #arrow:before,#arrow:after { position: absolute; content: '';
} #arrow:before { border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 20px solid #fff; left: -30px; top: -61px;
} #arrow:after { height: 120px; border-left: 2px solid red; border-right: 2px solid red; left: -2px; top: -161px;
}</style><div id="arrow"></div>效果如圖：
繪製五角星
<style>
#star-five { margin: 75px 0 55px 0; float: left; width: 0; height: 0; border-top: 66px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; position: relative;
} #star-five:before,#star-five:after { position: absolute; content: ''; border-top: 66px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; top: -66px; left: -100px;
} #star-five:before { transform: rotate(-72deg);
} #star-five:after { transform: rotate(72deg);
}</style><div id="star-five"></div>效果如圖：
<style>
#prompt { float: left; width: 200px; height: 100px; margin: 20px 0 40px; border-radius: 20px; background: #669; position: relative;
} #prompt:after { position: absolute; content: ""; width: 50px; height: 120px; border: 0 solid transparent; border-right: 30px solid #669; border-radius: 0 0 50px 0; top: 0; left: 0;
}</style><div id="prompt"></div>
<style>
#balloon { float: left; width: 160px; height: 160px; background: #faf9f9;
border-radius: 160px 160px 64px 160px; transform: rotate(45deg);
box-shadow: 0 0 100px 0 rgba(243,98,122,1) inset, 20px 20px 20px rgba(243,98,122,0.3); position: relative;
} #balloon:after { position: absolute; content: '';
border: 8px solid transparent; border-right-color: rgba(243,98,122,0.88);
transform: rotate(45deg); border-radius: 16px;
bottom: -2px; right: -2px;
}</style><div id="balloon"></div>
<style>
#yin-yang { float: left; width: 48px; height: 96px; background-color: #fff; border-style: solid; border-color: #000; border-width: 2px 50px 2px 2px; border-radius: 50%; -webkit-animation: Rotate 6s linear infinite; /*旋转*/
position: relative;
} #yin-yang:before,#yin-yang:after { position: absolute; content: '';
} #yin-yang:before { width: 12px; height: 12px; background: #fff; border: 18px solid #000; border-radius: 50%; top: 0; left: 50%;
} #yin-yang:after { width: 12px; height: 12px; background: #000; border: 18px solid #fff; border-radius: 50%; top: 50%; left: 50%;
}
@-webkit-keyframes Rotate {
0%{transform: rotate(360deg)}
100%{transform: rotate(0deg)}
}
@keyframes Rotate {
0%{transform: rotate(360deg)}
100%{transform: rotate(0deg)}
}</style><div id="yin-yang"></div>以上是css3簡單圖形繪製教程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
