css图形速查

1.圆形

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

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

.

右半圆

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

下半圆

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

左半圆

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

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%;
}

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%;
}

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

右上

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

左下

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

右下

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

6.对称叶子

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

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

 

8.egg(椭圆的变形)

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

9.圆环

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

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;//右

}

左上

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

右上

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

右下

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

左下

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

11.彩带

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

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

13.梯形

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

钻石

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

对话框

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

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%;
}

月亮

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

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

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

两个旋转拼接，形成。

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

同无限一样的基础图形，: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);
} 

爱心

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

两个图形以不同旋转顶点旋转拼接成爱心。