首頁 > web前端 > html教學 > css繪製特殊圖形基礎

css繪製特殊圖形基礎

WBOY
發布: 2016-10-15 10:32:04
原創
1413 人瀏覽過

1.等腰三角形

<span style="color: #800000;">.isosceles</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">30px solid</span>;<span style="color: #ff0000;">
    border-left-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-right-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-top-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-bottom-color</span>:<span style="color: #0000ff;"> red</span>;
}
登入後複製

2.直角三角形

<span style="color: #800000;">.right</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">30px solid</span>;<span style="color: #ff0000;">
    border-left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-right-color</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    border-bottom-color</span>:<span style="color: #0000ff;"> red</span>;
}
登入後複製

3.圓

<span style="color: #800000;">.round</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">50%</span>;   
}
登入後複製

4.橢圓

<span style="color: #800000;">.ellipse</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
    border-radius</span>:<span style="color: #0000ff;">50%</span>;   
}
登入後複製

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板