国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 繪制各種形狀

geekzhou / 1410人閱讀

摘要：說明使用可以繪制出許多形狀，比如三角形梯形圓形橢圓，等并不只是可以繪制矩形。前面后面左面右面下面查看示例總結(jié)文中實現(xiàn)的各種形狀，也許你覺得實現(xiàn)的很復(fù)雜，其實你也可以使用這一個屬性，繪制各種形狀。

說明

使用 CSS 可以繪制出許多形狀，比如三角形、梯形、圓形、橢圓，等 并不只是可以繪制矩形。下面來看看怎么實現(xiàn)這些形狀的吧。
為了容易理解，文章分為基本形狀 和 組合形狀來說，基本形狀是比較容易實現(xiàn)的，而利用這些基本形狀進行組合，就可以實現(xiàn)稍微復(fù)雜點的組合形狀了。

基本形狀 三角形 
.triangle {
    width: 0;
    height: 0;
    border: 50px solid blue;
    /* 通過改變邊框顏色，可以改變?nèi)切蔚姆较?*/
    border-color: blue transparent transparent transparent;
}

查看示例

梯形 
.trapzoid {
    width: 40px;
    height: 100px;
    border: 50px solid blue;
    border-color: transparent transparent blue transparent;
}

查看示例

圓形 
.circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background:blue;
}

查看示例

球體 
.sphere {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 70px 70px, #5cabff, #000);
}

查看示例

橢圓 
.ellipse {
    width: 200px;
    height: 100px;
    border-radius: 50%;
    background: blue;
}

查看示例

半圓 
.semicircle {
    width: 50px;
    height: 100px;
    /*  "/"前四個值表示圓角的水平半徑，后四個值表示圓角的垂直半徑*/
    border-radius: 200% 0 0 200% / 100% 0 0 100%;

    /* 效果和用%一樣 */
    /* border-radius: 50px 0 0 50px; */
    background: blue;
}

查看示例

菱形 
.rhombus {
    width: 200px;
    height: 200px;
    transform: rotateZ(45deg) skew(30deg, 30deg);
    background: blue;
}

查看示例

組合形狀 心形

心形是由兩個圓形和一個矩形進行組合得到的。

.heart {
    width: 100px;
    height: 100px;
    transform: rotateZ(45deg);
    background: red;
}

.heart::after,
.heart::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    background: red;
    position: absolute;
    top: -50%;
    left: 0;
}

.heart::before {
    top: 0;
    left: -50%;
}

查看示例

扇形

扇形是由一個圓形和一個矩形進行組合得到的，用矩形遮住圓形的一部分就形成了扇形。

.sector {
    width: 142px;
    height: 142px;
    background: #fff;
    border-radius: 50%;
    background-image: linear-gradient(to right, transparent 50%, #655 0);
}

.sector::before {
    content: "";
    display: block;
    margin-left: 50%;
    height: 100%;
    width: 100%;
    background-color: inherit;
    transform-origin: left;
    /*調(diào)整角度，改變扇形大小*/
    transform: rotate(230deg);
}

查看示例

五邊形

五邊形是由一個三角形和一個梯形進行組合得到的。

.pentagonal {
    width: 100px;
    position: relative;
    border-width: 105px 50px 0;
    border-style: solid;
    border-color: blue transparent;
}

.pentagonal:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: -185px;
    left: -50px;
    border-width: 0px 100px 80px;
    border-style: solid;
    border-color: transparent transparent blue;
}

查看示例

六邊形

六邊形是由兩個三角形和一個矩形進行組合得到的。

.hexagon {
    width: 200px;
    height: 100px;
    background-color: blue;
    position: relative;
}

.hexagon:before {
    content: "";
    position: absolute;
    top: -60px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 60px solid blue;
}

.hexagon:after {
    content: "";
    left: 0;
    width: 0;
    height: 0;
    bottom: -60px;
    position: absolute;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 60px solid blue;
}

查看示例

長方體

長方體是由六個矩形進行組合得到的。

.cuboid {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
}

.cuboid div {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    transition: .4s;
}

.cuboid .front {
    transform: rotateY(0deg) translateZ(100px);
    background: #a3daff;
}

.cuboid .back {
    transform: translateZ(-100px) rotateY(180deg);
    background: #a3daff;
}

.cuboid .left {
    transform: rotateY(-90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .right {
    transform: rotateY(90deg) translateZ(100px);
    background: #1ec0ff;
}

.cuboid .top {
    transform: rotateX(90deg) translateZ(100px);
    background: #0080ff;
}

.cuboid .bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background: #0080ff;
}

查看示例

圓柱體

圓柱體是由一個橢圓和一個圓角矩形進行組合得到的。

.cylinder {
    position: relative;
    transform: rotateX(70deg);
}

.ellipse {
    width: 100px;
    height: 100px; 
    background: deepskyblue;
    border-radius: 50px;
}

.rectangle {
    width: 100px;
    height: 400px;
    position: absolute;
    opacity: 0.6;
    background: deepskyblue;
    top: 0;
    left: 0; 
    border-radius: 50px;
    z-index: -1;
}

查看示例

如果使用了漸變色，看上去會更像一些。

background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);

查看示例

棱錐

棱錐是由四個三角形和一個矩形進行組合得到的。

.pyramid {
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(-80deg);
} 
.pyramid div {
    position: absolute;
    top: -100px;
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom-width: 200px;
    opacity: 0.8;
}

.pyramid .front {
    transform: translateZ(100px) rotateX(30deg);
    border-bottom-color: #a3daff;
    transform-origin: 0 100%;
}

.pyramid .back {
    transform: translateZ(-100px) rotateX(-30deg);
    border-bottom-color: #1ec0ff;
    transform-origin: 0 100%;
}

.pyramid .left {
    transform: translateX(-100px) rotateZ(30deg) rotateY(90deg);
    border-bottom-color: #0080ff;
    transform-origin: 50% 100%;
}

.pyramid .right {
    transform: translateX(100px) rotateZ(-30deg) rotateY(90deg);
    border-bottom-color: #03a6ff;
    transform-origin: 50% 100%;
}

.pyramid .bottom {
    transform: translateX(-100px) rotateZ(90deg) rotateY(90deg);
    background: cyan;
    width: 200px;
    height: 200px;
    border: 0;
    top: 0;
    transform-origin: 50% 100%;
}

查看示例

總結(jié)

文中實現(xiàn)的各種形狀，也許你覺得實現(xiàn)的很復(fù)雜，其實你也可以使用 clip-path 這一個屬性，繪制各種形狀。
CSS 能繪制的東西，不僅僅只有這些，還有很多很多，文中都沒有說出來，而即便是文中已經(jīng)實現(xiàn)的形狀也不只有一種實現(xiàn)方式，有興趣的小伙伴可以繼續(xù)去探索。

最后

這里有一個使用各種形狀進行組合，形成魔法陣的例子。

我們還可以給魔法陣中的形狀增加動畫，使魔法陣看上去更有趣。

查看示例

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116037.html

相關(guān)文章

  • CSS 繪制各種形狀

    摘要：說明使用可以繪制出許多形狀，比如三角形梯形圓形橢圓，等并不只是可以繪制矩形。前面后面左面右面下面查看示例總結(jié)文中實現(xiàn)的各種形狀，也許你覺得實現(xiàn)的很復(fù)雜，其實你也可以使用這一個屬性，繪制各種形狀。 說明 使用 CSS 可以繪制出許多形狀，比如三角形、梯形、圓形、橢圓，等 并不只是可以繪制矩形。下面來看看怎么實現(xiàn)這些形狀的吧。為了容易理解，文章分為基本形狀 和 組合形狀來說，基本形狀是比較...

    3fuyu 評論0 收藏0

  • css繪制各種各樣的形狀圖形

    摘要：我們在編寫前端代碼時，經(jīng)常會遇到各種各樣的形狀圖形如邊框?qū)υ捒颍切危叫兴倪呅螆A角邊框圓形四葉草花瓣等，除了用背景圖片雪碧圖或精靈圖定位引用和插入圖片的方法，我們還可以用邊框圓角漸變和定位的方法結(jié)合使用，繪制各種各樣的形狀圖形。 我們在編寫前端代碼時，經(jīng)常會遇到各種各樣的形狀圖形（如：邊框?qū)υ捒颍切危叫兴倪呅巍A角邊框、圓形、四葉草、花瓣等），除了用背景圖片（css雪碧圖或c...

    mingde 評論0 收藏0

  • css繪制各種各樣的形狀圖形

    摘要：我們在編寫前端代碼時，經(jīng)常會遇到各種各樣的形狀圖形如邊框?qū)υ捒颍切危叫兴倪呅螆A角邊框圓形四葉草花瓣等，除了用背景圖片雪碧圖或精靈圖定位引用和插入圖片的方法，我們還可以用邊框圓角漸變和定位的方法結(jié)合使用，繪制各種各樣的形狀圖形。 我們在編寫前端代碼時，經(jīng)常會遇到各種各樣的形狀圖形（如：邊框?qū)υ捒颍切危叫兴倪呅巍A角邊框、圓形、四葉草、花瓣等），除了用背景圖片（css雪碧圖或c...

    levinit 評論0 收藏0

  • css繪制各種形狀圖形（第二版）

    摘要：雖然我們現(xiàn)在大都使用字體圖標(biāo)或者圖片，似乎使用來做圖標(biāo)意義不是很大，但怎么實現(xiàn)這些圖標(biāo)用到的一些技巧及思路是很值得我們的學(xué)習(xí)。 雖然我們現(xiàn)在大都使用字體圖標(biāo)或者svg圖片，似乎使用 CSS 來做圖標(biāo)意義不是很大，但怎么實現(xiàn)這些圖標(biāo)用到的一些技巧及思路是很值得我們的學(xué)習(xí)。 一、實心圓 showImg(https://segmentfault.com/img/bVbsV6v?w=171&h...

    CoreDump 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<