• <samp id="662qu"><object id="662qu"></object></samp>
  • <blockquote id="662qu"></blockquote>
  • <blockquote id="662qu"><samp id="662qu"></samp></blockquote>

    余杭網頁制作設計:如何在CSS中創建形狀

    2019.01.15

    644

    余杭網頁制作設計

    在今天的教程中,讓我們創建一個簡單的列表,列出可以使用CSS 3創建的最常見的形狀。我們將通過這篇文章取得進展,最后,您將學習如何創建真正偉大的東西。


    如果您正在尋找SVG的介紹,請看這篇文章:如何使用SVG創建簡單的形狀。

    完成本教程所需的內容

    • 對CSS 3的了解
    • 時間和耐心

    查看演示→。

    創建CSS圓

    circle

    HTML

    CSS

    #circle {
        width: 120px;
        height: 120px;
        background: #7fee1d;
        -moz-border-radius: 60px;
        -webkit-border-radius: 60px;
        border-radius: 60px;
    }
    
    

    創建CSS廣場

    square

    HTML

    要在CSS中創建一個方形形狀,就像圓形形狀一樣,我們需要一個div,并給它一個形狀的ID名。因此,對于這個例子,將正方形設置為ID名稱。

    CSS

    對于正方形的CSS,只需設置相同值的寬度和高度,并提供一個使其看起來可見的值。

    #square {
        width: 120px;
        height: 120px;
        background: #f447ff;
    }
    

    創建CSS矩形

    倒三角形

    HTML

    CSS

    就像正方形,我們會放一個簡單的寬度,但這次比高度大。

    #rectangle {
        width: 220px;
        height: 120px;
        background: #4da1f7;
    }
    

    創建一個CSS橢圓

    余杭網頁制作設計:如何在CSS中創建形狀

    HTML

    CSS

    橢圓形與圓形幾乎相似;然而,橢圓形的形狀是矩形的,需要半徑為高度的一半。

    #oval {
        width: 200px;
        height: 100px;
        background: #e9337c;
        -webkit-border-radius: 100px / 50px;
        -moz-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }
    

    創建CSS三角形

    diamond

    HTML

    為了在CSS中創建一個三角形,再次設置一個ID名為三角形的div。

    <div id="triangle"></div>
    

    CSS

    #triangle {
        width: 0;
        height: 0;
        border-bottom: 140px solid #fcf921;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }
    

    創建CSS三角形 Down

    trapezium

    HTML

    若要使用CSS創建倒三角形形狀,請再次創建ID為tritrix_down的di余杭網頁制作設計v。

     

    CSS

    創建一個倒三角形,我們需要操作底部的邊界屬性。

    #triangle_down {
        width: 0;
        height: 0;
        border-top: 140px solid #20a3bf;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
    }
    

    創建CSS三角形 Left

    parallelogram<數>平行四邊形

    HTML

    CSS

    創建一個面向左的三角形,操作右側的邊框屬性。

    #triangle_left {
        width: 0;
        height: 0;
        border-top: 70px solid transparent;
        border-right: 140px solid #6bbf20;
        border-bottom: 70px solid transparent;
    }
    

    創建CSS三角形 Right

    星-6pt

    HTML

    CSS

    創建一個面向左的三角形,操作左側的邊框屬性。

    #triangle_right {
        width: 0;
        height: 0;
        border-top: 70px solid transparent;
        border-left: 140px solid #ff5a00;
        border-bottom: 70px solid transparent;
    }
    

    創建CSS鉆石

    pentagon

    HTML

    若要使用CSS創建鉆石形狀,請提供ID名稱為菱形的div。

    CSS

    #diamond {
        width: 120px;
        height: 120px;
        background: #1eff00;
    /* Rotate */
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    /* Rotate Origin */
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
        margin: 60px 0 10px 310px;
    }
    

    創建CSS梯形

    hexagon

    HTML

    要使用CSS創建梯形形狀,請設置ID名稱為梯形的div。

    CSS

    通過設置與平底相等的左右邊框,可以顯示梯形。

    #trapezium {
        height: 0;
        width: 120px;
        border-bottom: 120px solid #ec3504;
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
    }
    

    創建CSS平行四邊形

    star

    HTML

    CSS

    若要創建平行四邊形形狀,請設置傾斜的轉換值,使元素以30度的角度旋轉。

    #parallelogram {
        width: 160px;
        height: 100px;
        background: #8734f7;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        -o-transform: skew(30deg);
        transform: skew(30deg);
    }
    
    

    heart

    HTML

    為了使用CSS創建一個星型,需要一個帶有ID星號的div。

    CSS

    恒星的產生是利用變換的旋轉值對邊界進行奇怪的處理。見下面的代碼。

    #star {
        width: 0;
        height: 0;
        margin: 50px 0;
        color: #fc2e5a;
        position: relative;
        display: block;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -moz-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
    }
    
    #star:before {
        height: 0;
        width: 0;
        position: absolute;
        display: block;
        top: -45px;
        left: -65px;
        border-bottom: 80px solid #fc2e5a;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        content: '';
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
    }
    
    #star:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        display: block;
        top: 3px;
        left: -105px;
        color: #fc2e5a;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
    }
    

    創建CSS六點星

    egg

    HTML

    使用CSS的六點星型的標記將需要一個ID名為平行四邊形的div。

    CSS

    #star_six_points {
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #de34f7;
        margin: 10px auto;
    }
    
    #star_six_points:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #de34f7;
        margin: 30px 0 0 -50px;
    }
    

    創建一個CSS五角大樓

    infinity

    HTML

    若要創建五角大樓,請設置一個帶有五角大樓標識的div。

    CSS

    創建一個五角大樓需要兩個元素來創建一個。首先創建一個梯形形狀,然后在其上面添加一個三角形形狀。

    #pentagon {
        width: 54px;
        position: relative;
        border-width: 50px 18px 0;
        border-style: solid;
        border-color: #277bab transparent;
    }
    
    #pentagon:before {
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent #277bab;
    }
    

    pacman

    HTML

    CSS有不同的方法來創建一個六邊形。創建它的一種方法幾乎與五角大樓的創建相同。首先創建一個矩形形狀,余杭網頁制作設計然后在頂部添加兩個三角形。

    #hexagon {
        width: 100px;
        height: 55px;
        background: #fc5e5e;
        position: relative;
        margin: 10px auto;
    }
    
    #hexagon:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #fc5e5e;
    }
    
    #hexagon:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #fc5e5e;
    }
    

    rectangle

    HTML

    創建一個八角形將需要一個帶有ID八角形的div。

    CSS

    #octagon {
        width: 100px;
        height: 100px;
        background: #ac60ec;
        position: relative;
    }
    
    #octagon:before {
        content: "";
        width: 42px;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 29px solid #ac60ec;
        border-left: 29px solid #f4f4f4;
        border-right: 29px solid #f4f4f4;
    }
    
    #octagon:after {
        content: "";
        width: 42px;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 29px solid #ac60ec;
        border-left: 29px solid #f4f4f4;
        border-right: 29px solid #f4f4f4;
    }    
    
    }
    

    創建CSS心臟

    triangle

    HTML

    CSS

    心形可能很難完成,但可以通過從不同角度旋轉元素并改變變換原點屬性來改變變換元素的位置來完成。

    #heart {
        position: relative;
    }
    
    #heart:before,#heart:after {
        content: "";
        width: 70px;
        height: 115px;
        position: absolute;
        background: red;
        left: 70px;
        top: 0;
        -webkit-border-radius: 50px 50px 0 0;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    
    #heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }
    
    

    octagon

    HTML

    為了創建一個雞蛋形狀的CSS,首先創建一個ID名為E余杭網頁制作設計GG的div。

    CSS

    雞蛋形狀與橢圓形幾乎相同,只是高度略高于寬度,半徑被精心操縱,以獲得好的效果。

    #egg {
        width: 136px;
        height: 190px;
        background: #ffc000;
        display: block;
        -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
    

    創建CSS無窮大符號

    三角形左

    HTML

    CSS

    無限大的形狀可以通過仔細地操作邊界和設置圓形的角度來實現。

    #infinity {
        width: 220px;
        height: 100px;
        position: relative;
    }
    
    #infinity:before,#infinity:after {
        content: "";
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        border: 20px solid #06c999;
        -moz-border-radius: 50px 50px 0;
        border-radius: 50px 50px 0 50px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    #infinity:after {
        left: auto;
        right: 0;
        -moz-border-radius: 50px 50px 50px 0;
        border-radius: 50px 50px 50px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    

    創建CSS注釋氣泡

    oblong

    HTML

    為了在CSS中創建一個注釋氣泡形狀,創建一個ID名稱COMMENT_BLOUM的div。

    CSS

    通過制作一個矩形并給它一個邊框半徑,然后在左側放置一個三角形形狀,就可以創建一個泡泡注釋形狀。

    #comment_bubble {
        width: 140px;
        height: 100px;
        background: #088cb7;
        position: relative;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
    }
    
    #comment_bubble:before {
        content: "";
        width: 0;
        height: 0;
        right: 100%;
        top: 38px;
        position: absolute;
        border-top: 13px solid transparent;
        border-right: 26px solid #088cb7;
        border-bottom: 13px solid transparent;
    }
    

    HTML

    若要在CSS中創建Pacman形狀,請創建ID為Pacman的div。

    CSS

    創造一個吃豆人也是一個黑客。只需操作邊框和半徑,就可以在圓圈的左側創建一個開口。

    #pacman {
        width: 0;
        height: 0;
        border-right: 70px solid transparent;
        border-top: 70px solid #ffde00;
        border-left: 70px solid #ffde00;
        border-bottom: 70px solid #ffde00;
        border-top-left-radius: 70px;
        border-top-right-radius: 70px;
        border-bottom-left-radius: 70px;
        border-bottom-right-radius: 70px;
    }
    

    結束語

    使用CSS形狀在您的網站上放置圖像有很多優點。今天,您可以使用形狀作為逐步工作流程的一部分,盡管它們在余杭網頁制作設計不支持的瀏覽器中有可接受的回退選項,特別是在侏羅紀IE瀏覽器中。

    關鍵詞

    最新案例

    聯系電話 400-6065-301

    留言

    亚洲人成电影在线手机网站 - 视频 - 在线播放 - 影视资讯 - 免费啪