早前学习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; }