利用Css3画各种几何图形(-)

2016-03-10

早前学习css3的练习,通过纯css实现基本的图形,熟悉css的属性应用。今天抽空整理出来,分享给想要学习css的同学。

.rectangle {
    width: 100px;
    height: 80px;
    background-color: #669;
}

.trapezoid {
    border-bottom: 50px solid #669;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    width: 80px;
}

.parallelogram {
    width: 80px;
    height: 50px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    background: #669;
}

.triangle-up {
    display: inline-block;
    border-width: 0px 30px 50px 30px;
    border-color: transparent transparent #669 transparent;
    border-style: solid;
}

.triangle-bottom {
    border-width: 50px 30px 0px 30px;
    border-color: #669 transparent transparent transparent;
    border-style: solid;
}

.triangle-left {
    display: inline-block;
    border-width: 30px 50px 30px 0px;
    border-color: transparent #669 transparent transparent;
    border-style: solid;
}

.triangle-right {
    display: inline-block;
    border-width: 30px 0px 30px 50px;
    border-color: transparent transparent transparent #669;
    border-style: solid;
}

.triangle-updown {
    width: 0;
    height: 0;
    border-left: 46px solid transparent;
    border-right: 46px solid transparent;
    border-bottom: 60px solid #669;
    position: relative;
}
.triangle-updown:after {
    content: " ";
    width: 0;
    height: 0;
    border-left: 46px solid transparent;
    border-right: 46px solid transparent;
    border-top: 60px solid #669;
    position: absolute;
    top: 20px;
    left: -45px;
}

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 50px solid #669;
    border-right: 50px solid transparent;
}

.triangle-topright {
    width: 0;
    height: 0;
    border-top: 50px solid #669;
    border-left: 50px solid transparent;
}

.triangle-bottomleft {
    width: 0;
    height: 0;
    border-left: 50px solid #669;
    border-top: 50px solid transparent;
}

.triangle-bottomright {
    width: 0;
    height: 0;
    border-right: 50px solid #669;
    border-top: 50px solid transparent;
}

.one {
    width: 0;
    height: 0;
    border-top: 25px solid #669;
    border-right: 25px solid transparent;
    border-bottom: 25px solid #669;
    border-left: 25px solid #669;
}

.two {
    width: 0;
    height: 0;
    border-top: 25px solid #669;
    border-right: 25px solid transparent;
    border-bottom: 25px solid #669;
}

.three {
    width: 0;
    height: 0;
    border-top: 50px solid #669;
    border-right: 50px solid transparent;
    border-left: 50px solid #669;
}

.four {
    display: inline-block;
    border-width: 25px;
    border-style: solid;
    border-color: antiquewhite burlywood lightblue lightsalmon;
}

.solid-ring {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background-color: #669;
}

.circle-circle {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    background-color: #fff;
    border: 10px solid #669;
}

.circle-top {
    border-radius: 999px 999px 0 0;
    border-top: 25px solid #669;
    width: 50px;
}

.circle-bottom {
    border-radius: 0 0 999px 999px;
    border-bottom: 25px solid #669;
    width: 50px;
}

.circle-left {
    width: 25px;
    border-bottom: 25px solid #669;
    border-top: 25px solid #669;
    border-radius: 999px 0 0 999px;
}

.circle-right {
    width: 25px;
    border-bottom: 25px solid #669;
    border-top: 25px solid #669;
    border-radius: 0 999px 999px 0;
}

.circle-top-left {
    display: inline-block;
    border: 25px solid #669;
    border-top-left-radius: 999px;
}

.circle-top-right {
    display: inline-block;
    border: 25px solid #669;
    border-top-right-radius: 999px;
}

.circle-bottom-left {
    display: inline-block;
    border: 25px solid #669;
    border-bottom-left-radius: 999px;
}

.circle-bottom-right {
    display: inline-block;
    border: 25px solid #669;
    border-bottom-right-radius: 999px;
}

.u {
    width: 50px;
    border: 1px solid #669;
    border-radius: 0 0 999px 999px;
    height: 25px;
}

#cut-diamond {
    border-style: solid;
    border-color: transparent transparent #669 transparent;
    border-width: 8px 15px 20px 15px;
    height: 0;
    width: 50px;
    position: relative;
    margin-bottom: 24px;
}
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 19px;
    left: -15px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #669 transparent transparent transparent;
    border-width: 35px 25px 0 25px;
}

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

#infinity {
    position: relative;
    width: 104px;
    height: 50px;
}
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border: 11px solid #669;
    border-radius: 50px 50px 0 50px;
    transform: rotate(-45deg);
}
#infinity:after {
    left: auto;
    right: 0;
    border-radius: 50px 50px 50px 0;
    transform: rotate(45deg);
}

.heart {
    position: relative;
    width: 50px;
    height: 50px;
}
.heart:before, .heart:after {
    position: absolute;
    content: "";
    left: 0px;
    top: 0;
    width: 30px;
    height: 50px;
    background-color: #669;
    border-radius: 999px 999px 0 0;
    transform: rotate(-45deg);
}
.heart:after {
    transform: rotate(45deg);
    left: 14px;
}

.star-five {
    display: inline-block;
    position: relative;
    border-right: 10px solid transparent;
    border-bottom: 25px solid #669;
    border-left: 10px solid transparent;
    margin-bottom: 34px;
}
.star-five:before, .star-five:after {
    position: absolute;
    content: "";
    border-right: 25px solid #669;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    transform: rotate(54deg);
    left: -15px;
    top: -2px;
}
.star-five:after {
    content: "";
    transform: rotate(125deg);
    top: -2px;
    left: -11px;
}

.tail-left-top {
    border: 0 solid transparent;
    border-top: 25px solid #669;
    border-radius: 55px 0 0 0;
    width: 55px;
    height: 50px;
}

.tail-right-top {
    width: 55px;
    height: 50px;
    border: 0 solid transparent;
    border-top: 25px solid #669;
    border-radius: 0 55px 0 0;
}

.tail-left-bottom {
    width: 55px;
    height: 50px;
    border: 0 solid transparent;
    border-bottom: 25px solid #669;
    border-radius: 0 0 0 55px;
}

.tail-right-bottom {
    width: 55px;
    height: 50px;
    border: 0 solid transparent;
    border-bottom: 25px solid #669;
    border-radius: 0 0 55px 0;
}

.talk-box {
    width: 100px;
    height: 50px;
    border-radius: 6px;
    background-color: #669;
    position: relative;
    margin-left: 49px;
}
.talk-box:after {
    content: "";
    position: absolute;
    border: 0 solid transparent;
    width: 27px;
    height: 40px;
    bottom: -21px;
    left: -26px;
    border-top: 15px solid #669;
    border-radius: 55px 0 0 0;
}

luojh.me

.tips {
    position: relative;
    width: 120px;
    height: 46px;
    background-color: #fff;
    border: 1px solid #669;
    border-radius: 6px;
    padding: 2px;
    text-align: center;
}
.tips:before {
    content: "";
    position: absolute;
    left: -15px;
    top: 17px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 15px solid #669;
}
.tips:after {
    content: "";
    position: absolute;
    left: -13px;
    top: 18px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 13px solid #fff;
}

一生最重不过饱餐与被爱