CSS基本图形

国旗

.flag {
    position: relative;
    width: 220px;
    height: 147px;
    margin: 0 auto;
    background-color: #de2910;
}
.flag::before {
    content: '';
    display: block;
    position: relative;
    width: 220px;
    height: 147px;
    background: #FDDA24;
    clip-path: polygon(37px 15px, 42px 30px, 58px 30px, 45px 39px, 50px 55px, 37px 45px, 24px 55px, 29px 39px, 16px 30px, 32px 30px, 37px 15px, 67px 18px, 71px 14px, 68px 10px, 73px 12px, 76px 8px, 76px 13px, 81px 15px, 76px 17px, 75px 22px, 72px 17px, 67px 18px, 81px 30px, 86px 28px, 85px 23px, 89px 27px, 93px 24px, 91px 29px, 95px 33px, 89px 32px, 87px 37px, 86px 31px, 81px 30px, 81px 49px, 86px 49px, 88px 44px, 90px 49px, 95px 49px, 91px 52px, 93px 57px, 88px 54px, 84px 58px, 86px 52px, 81px 49px, 68px 62px, 73px 63px, 76px 59px, 76px 64px, 81px 66px, 76px 68px, 76px 73px, 73px 69px, 68px 71px, 71px 66px, 68px 62px, 81px 49px, 81px 30px, 67px 18px);
}

正方形

.square {
    width: 100px;
    height: 100px;
    background: #009ad6;
}

矩形

.rectangle {
    width: 200px;
    height: 100px;
    background: #009ad6;
}

平行四边形

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

梯形

.trapezoid {
    border: 50px solid transparent;
    border-bottom: 100px solid #009ad6;
    border-top: 0;
    height: 0;
    width: 100px;
}

圆形

.circle {
    width: 100px;
    height: 100px;
    background: #009ad6;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

椭圆

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

三角形-上

.triangle-top {
    width: 0;
    height: 0;
    border: 58px solid transparent;
    border-bottom: 100px solid #009ad6;
    border-top: 0;
}

三角形-下

.triangle-down {
    width: 0;
    height: 0;
    border: 58px solid transparent;
    border-top: 100px solid #009ad6;
    border-bottom: 0;
}

三角形-左

.triangle-left {
    width: 0;
    height: 0;
    border: 58px solid transparent;
    border-right: 100px solid #009ad6;
    border-left: 0;
}

三角形-右

.triangle-right {
    width: 0;
    height: 0;
    border: 58px solid transparent;
    border-left: 100px solid #009ad6;
    border-right: 0;
}

三角形-左上

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid #009ad6; 
    border-right: 100px solid transparent; 
}

三角形-右上

.triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid #009ad6;
    border-left: 100px solid transparent;
}

三角形-左下

.triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid #009ad6;
    border-right: 100px solid transparent;
}

三角形-右下

.triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid #009ad6;
    border-left: 100px solid transparent;
}

五边形

.pentagon {
    position: relative;
    width: 54px;
    border: 18px solid transparent;
    border-top: 50px solid #009ad6;
    border-bottom: 0;
}
.pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border: 45px solid transparent;
    border-bottom: 35px solid #009ad6;
    border-top: 0;
}

六边形

.hexagon, .hexagon:before, .hexagon:after {
    position: relative;
    width: 100px;
    height: 58px;
    background: #009ad6;
}
.hexagon:before {
    content: "";
    position: absolute;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}
.hexagon:after {
    content: "";
    position: absolute;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

八边形

octagon {
    position: relative;
    width: 100px;
    height: 41px;
    background: #009ad6;
}
.octagon:before {
    content: "";
    position: absolute;
    top: -29px;
    width: 42px;
    height: 0;
    border: 29px solid transparent;
    border-bottom: 29px solid #009ad6;
    border-top: 0;
}
.octagon:after {
    content: "";
    position: absolute;
    bottom: -29px;
    width: 42px;
    height: 0;
    border: 29px solid transparent;
    border-top: 29px solid #009ad6;
    border-bottom: 0;
}

五角星

.star-five, .star-five:before, .star-five:after {
    display: block;
    width: 0;
    height: 0;
    border: 53px solid transparent;
    border-top: 38px solid #009ad6;
    border-bottom: 0;
}
.star-five:before, .star-five:after {
    content: "";
    position: absolute;
    left: -53px;
    top: -38px;
}
.star-five {
    position: relative;
}
.star-five:before {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
}
.star-five:after {
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    transform: rotate(-70deg);
}

六角星

.star-six {
    width: 0;
    height: 0;
    border: 44px solid transparent;
    border-bottom: 75px solid #009ad6;
    border-top: 0;
    position: relative;
}
.star-six:after {
    width: 0;
    height: 0;
    border: 44px solid transparent;
    border-top: 75px solid #009ad6;
    border-bottom: 0;
    position: absolute;
    content: "";
    top: 25px;
    left: -44px;
}

八角星

.burst-8, .burst-8:before {
    width: 80px;
    height: 80px;
    background: #009ad6;
}
.burst-8 {
    position: relative;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20eg);
    transform: rotate(20deg);
}
.burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

十二角星

.burst-12, .burst-12:before, .burst-12:after {
    height: 80px;
    width: 80px;
    background: #009ad6;
}
.burst-12:before, .burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}
.burst-12 {
    position: relative;
    text-align: center;
}
.burst-12:before {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
.burst-12:after {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

心形

.heart {
    position: relative;
    width: 100px;
    height: 90px;
}
.heart:before, .heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: #009ad6;
    -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%;
}

无穷大符号

.infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
.infinity:before, .infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border: 20px solid #009ad6;
    -webkit-border-radius: 50px 50px 0 50px;
    -moz-border-radius: 50px 50px 0 50px;
    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: 100px;
    -webkit-border-radius: 50px 50px 50px 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);
}

蛋

.egg {
   display:block;
   width: 70px;
   height: 100px;
   background-color: #009ad6;
   -webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
   -moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

吃豆人 Pac-Man

.pacman {
    width: 0px;
    height: 0px;
    border: 60px solid #009ad6;
    border-right-color: transparent;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

对话框

.talkbubble {
    position: relative;
    width: 150px;
    height: 100px;
    background: #009ad6;
    margin-left: 20px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.talkbubble:before {
    content:"";
    position: absolute;
    right: 100%;
    top: 33px;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-right: 26px solid #009ad6;
    border-left: 0;
}

钻石

.jewel {
    position: relative;
    border: 25px solid transparent;
    border-bottom-color: #009ad6;
    border-top: 0;
    height: 0;
    width: 50px;
}
.jewel:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid #009ad6;
    border-bottom: 0;
}

两仪

.yin-yang {
    width: 96px;
    height: 48px;
    background: #fff;
    border: 2px solid #009ad6;
    border-bottom-width: 50px;
    border-radius: 100%;
    position: relative;
}
.yin-yang:before, .yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #f00;
    border: 18px solid #009ad6;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
.yin-yang:after {
    left: 50%;
    background: #009ad6;
    border-color: #fff;
}

CSS基本图形By cct

CSS基本图形^{By cct}