css图形速查

青旅半醒 2021-12-18 15:19 293阅读 0赞

## 1.圆形 ##

.circle{
        width: 100px;
        height: 100px;
        background-color: #000;
        border-radius: 50%;
    }

![20190702160403786.png][]

## 2.半圆 ##

**上半圆**

.semicircle-top{
        width: 300px;
        height: 150px;
        background: #000000;
        -moz-border-radius: 300px 300px 0 0;
        -webkit-border-radius: 300px 300px 0 0;
        border-radius: 300px 300px 0 0;
    }

![20190702162619292.png][]

**右半圆**

.semicircle-right{
        width: 75px;
        height: 150px;
        background: #000000;
        -moz-border-radius: 150px 150px 0;
        -webkit-border-radius: 0 150px 150px 0;
        border-radius: 0 150px 150px 0;
    }

![20190702170707648.png][]

**下半圆**

.semicircle-bottom{
        width: 150px;
        height: 75px;
        background: #000000;
        -moz-border-radius:0 0 150px 150px;
        -webkit-border-radius: 0 0 150px 150px;
        border-radius: 0 0 150px 150px;
    }

![20190703141638510.png][]

**左半圆**

.semicircle-left{
        width: 75px;
        height: 150px;
        background: #000000;
        -moz-border-radius: 150px 0 0 150px;
        -webkit-border-radius: 150px 0 0 150px;
        border-radius: 150px 0 0 150px;
    }

![20190703141823754.png][]

### 3.椭圆 ###

.oval{
        width: 80px;
        height: 160px;
        background: #000000;
        -moz-border-radius: 80px/160px;
        -webkit-border-radius: 80px/160px;
        border-radius: 80px/160px;
        //border-radius: 50%;
    }

![20190703144219923.png][]

### 4.表图 ###

.chartColorful{
        height: 0px;
        width: 0px;
        border-height: 100px;
        border-color: #4CAF50 red #FFEB3B orange;
        -moz-border-radius: 50px;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        //border-radius: 50%;
    }

![20190703144552639.png][]

### 5.四分之一圆 ###

**左上**

.quarterCircle-leftTop{
        background: #000;
        height: 100px;
        width: 100px;
        -moz-border-radius: 100px 0 0 0;
        -webkit-border-radius: 100px 0 0 0;
        border-radius: 100px 0 0 0;
    }

![20190703145244236.png][]

**右上**

.quarterCircle-rightTop{
        background: #000;
        height: 100px;
        width: 100px;
        -moz-border-radius: 0 100px 0 0;
        -webkit-border-radius: 0 100px 0 0;
        border-radius: 0 100px 0 0;
    }

![20190703145317764.png][]

**左下**

.quarterCircle-leftBottom{
        background: #000;
        height: 100px;
        width: 100px;
        -moz-border-radius: 0 0 0 100px;
        -webkit-border-radius: 0 0 0 100px;
        border-radius: 0 0 0 100px;
    }

![2019070314545575.png][]

**右下**

.quarterCircle-rightBottom{
        background: #000;
        height: 100px;
        width: 100px;
        -moz-border-radius: 0 0 100px 0;
        -webkit-border-radius: 0 0 100px 0;
        border-radius: 0 0 100px 0;
    }

![20190703145541279.png][]

### 6.对称叶子 ###

.leaves{
        background: #000;
        height: 100px;
        width: 100px;
        -moz-border-radius: 100px 0;
        -webkit-border-radius: 100px 0;
        border-radius: 100px 0;
    }

![20190703151343930.png][]

### 7.Pac-Man(border圆形，使一边透明) ###

**上（下、左、右）**

.PacMan-Top{
        height: 0;
        width: 0;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px; 
        border-radius: 50px;
        border: 50px solid #000;
        border-top-color: transparent;
        //border-bottom-color: transparent;
        //border-left-color: transparent;
        //border-right-color: transparent;
    }

![20190703161103449.png][]

### 8.egg(椭圆的变形) ###

.egg{
        width: 126px;
        height: 180px;
        background-color: #000;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }

![20190703163227938.png][]

### 9.圆环 ###

.ring{
        border: 50px solid #000;
        width: 50px;
        height: 50px;
        border-radius: 100px;
    }

![2019070316352199.png][]

### 10.三角形 ###

**朝上**

.triangle-up{
        height: 0;
        width: 0;
        border: 50px solid #000000;
        border-color: transparent transparent #000000 transparent;
        //border-color: #000000 transparent transparent transparent;//下
        //border-color: transparent #000000 transparent transparent;//左
        //border-color: transparent transparent transparent #000000;//右
    
    }

![20190703172208997.png][]

**左上**

.triangle-leftTop{
          width: 0;
          height: 0;
          border-top: 100px solid #000;
          border-right: 100px solid transparent;
    }

![20190704140232965.png][]

**右上**

.triangle-rightTop{
          width: 0;
          height: 0;
          border-top: 100px solid #000;
          border-left: 100px solid transparent;
    }

![20190704140435563.png][]

**右下**

.triangle-rightBottom{
          width: 0;
          height: 0;
          border-bottom: 100px solid #000;
          border-left: 100px solid transparent;
    }

![20190704140604785.png][]

**左下**

.triangle-leftBottom{
          width: 0;
          height: 0;
          border-bottom: 100px solid #000;
          border-right: 100px solid transparent;
    }

![20190704140653367.png][]

### 11.彩带 ###

.ribbon{
        width: 0;
        height: 100px;
        border: 50px solid red;
        border-bottom: 35px solid transparent; 
    }

![20190704105059565.png][]

###    12.平行四边形 ###

.parallelogram {
        width: 150px;
        height: 100px;
        -webkit-transform: skew(-20deg);
        -moz-transform: skew(-20deg);
        -o-transform: skew(-20deg);
        -ms-transform: skew(-20deg);
        transform: skew(-20deg);
        background: #000;
    }

![2019070409421196.png][]

### 13.梯形 ###

**[css绘制梯形图形，及显示矩形图片][css]**

梯形的多钟实现方式。

使用以上基本图形结合:after和:before，拼合后可实现更多图形。

### 菱形 ###

.diamond{
        width: 0;
        height: 0;
        border: 70px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
        top: -70px;
    }
    
    .diamod:after{
        content: "";
        position: absolute;
        top: 100px;
        left: -70px;
        border: 70px solid transparent;
        border-top: 100px solid #000;
    }

![20190704100222708.png][]

### 钻石 ###

.cutDiamod{
        border-style: solid;
        border-color: transparent transparent #BDBDBD transparent;
        border-width: 0 30px 30px 30px;
        height: 0;
        width: 50px;
        box-sizing: content-box;
        position: relative;
    }
    
    .cutDiamod:after{
        content: "";
        position: absolute;
        top: 30px;
        left: -30px;
        border: 55px solid transparent;
        border-top: 70px solid #000;
    }

![2019070410135334.png][]

### 对话框 ###

.dialog{
        width: 120px;
        height: 80px;
        background: black;
        position: relative;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    
    .dialog:after{
        content: "";
        position: absolute;
        right: 100%;
        top: 30px;
        border: 10px solid transparent;
        border-right: 20px solid #90CAF9;
    }

![20190704102239266.png][]

**TV**

.tv{
        position: relative;
        width: 200px;
        height: 150px;
        background: red;
        border-radius: 50% / 10%;
    }
    
    .tv：after{
        content: "";
        position: absolute;
        top: 10%;
        bottom: 10%;
        right: -5%;
        left: -5%;
        background: inherit;
        border-radius: 5% / 50%;
    }

![20190704134726498.png][]

**月亮**

.moon{
       width: 100px;
       height: 100px;
       border-radius: 50%;
       box-shadow: 15px 15px 0 0 #000;
    }

![20190704135721627.png][]

**无限（两圆环变形后的拼接）**

.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);
    }

![20190715092253774.png][]两个旋转拼接，形成。![20190715092433147.png][]

**桥洞（不知道怎么取名了）**

同无限一样的基础图形，:afetr的left为0，使两个图形重叠。

.hole {
        width: 220px;
        height: 100px;
        position: relative;
    }
    
    .hole:before,.hole: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);
    }
    
    .hole:after {
        left: 0;
        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);
    }

![20190715093047353.png][]

**爱心**

.heart {
        position:relative;
    }
    
    .heart:before{
        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{
        content: "";
        width: 70px;
        height: 115px;
        position: absolute;
        background: red;
        top: 0;
        border-radius: 50px 50px 0 0;
        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%;
    }

![20190715094537994.png][]两个图形以不同旋转顶点旋转拼接成爱心。![20190715094618113.png][]

[20190702160403786.png]: /images/20211218/977150d371a643adb0ea3f66c96a847d.png
[20190702162619292.png]: /images/20211218/46647a3ad1094fdbbe83ef72eeba79c7.png
[20190702170707648.png]: /images/20211218/4ff13771b256459a924debd2b904bd2f.png
[20190703141638510.png]: /images/20211218/7d3bbd67ecf14176a2cbd4318df109c3.png
[20190703141823754.png]: /images/20211218/658423fbbcbd44f5b6b596f5f4c5e3d3.png
[20190703144219923.png]: /images/20211218/541fae48c23646e9865d938fa8489c3b.png
[20190703144552639.png]: /images/20211218/459961e16c904fe7924c2b0d4015f391.png
[20190703145244236.png]: /images/20211218/4e33b5e8f83d410f825565c7f6d58b0a.png
[20190703145317764.png]: /images/20211218/c2f19e9d89fd4c6fbb6edf8cea444355.png
[2019070314545575.png]: /images/20211218/09d6c78edbfd4094b15b99f2a11fdb32.png
[20190703145541279.png]: /images/20211218/e3fdc955c09f40db9e02f9dc2673676c.png
[20190703151343930.png]: /images/20211218/1c2b13e4e4b646d49a15778b92d05e9f.png
[20190703161103449.png]: /images/20211218/dff3e423e9664ec48fb820df22bf8d40.png
[20190703163227938.png]: /images/20211218/5585370c6e5947258ee02d7275dbedab.png
[2019070316352199.png]: /images/20211218/138d03dc2dfe4815bb1617849e566762.png
[20190703172208997.png]: /images/20211218/cdfcb0117c5244119024a55b54c2dca8.png
[20190704140232965.png]: /images/20211218/7927f864761645408d244c51a6d3e160.png
[20190704140435563.png]: /images/20211218/ba5b67e821f54af493778bdc8fa020f1.png
[20190704140604785.png]: /images/20211218/698485e434cd47518886e81879185a55.png
[20190704140653367.png]: /images/20211218/fc96194573954650a434609d58d5ac26.png
[20190704105059565.png]: /images/20211218/c8335c88a3494f23a3ef357247db7b79.png
[2019070409421196.png]: /images/20211218/6c24a26d016f445798d300cafb92d78a.png
[css]: https://blog.csdn.net/YouZi_X/article/details/83506979
[20190704100222708.png]: /images/20211218/e678b4e69ff54c3e84de9fc4e8c16573.png
[2019070410135334.png]: /images/20211218/071c7cb89c704189bd0b0362f657639b.png
[20190704102239266.png]: /images/20211218/66e6171a97004a6bbac9a5c6a238740d.png
[20190704134726498.png]: /images/20211218/67b572d418f04728912b209e58a9d0ae.png
[20190704135721627.png]: /images/20211218/9a8a3dcc8eae44099ca5847abcfe29e1.png
[20190715092253774.png]: https://img-blog.csdnimg.cn/20190715092253774.png
[20190715092433147.png]: /images/20211218/fb1ceecb437049f599fe0be17bfaeddd.png
[20190715093047353.png]: /images/20211218/fbb07bd06add44b1b3bd24ec2102b111.png
[20190715094537994.png]: https://img-blog.csdnimg.cn/20190715094537994.png
[20190715094618113.png]: /images/20211218/46c8eeef850349d196987f7242a24cbd.png