CSS3图形,Css画图,Css3三角形
CSS3 图形
圆:
Html代码
- #circle {
- width: 140px;
- height: 140px;
- background: red;
- -moz-border-radius: 70px;
- -webkit-border-radius: 70px;
- border-radius: 70px;
- }
正方形:
Html代码
- #square {
- width: 140px;
- height: 140px;
- background: blue;
- }
椭圆:
Html代码
- #oval {
- width: 200px;
- height: 100px;
- background: purple;
- -moz-border-radius: 100px / 50px;
- -webkit-border-radius: 100px / 50px;
- border-radius: 100px / 50px;
- }
上三角形:
Html代码
- #up-triangle {
- width: 0;
- height: 0;
- border-bottom: 120px solid green;
- border-left: 60px solid transparent;
- border-right: 60px solid transparent;
- }
下三角形:
Html代码
- #down-triangle {
- width: 0;
- height: 0;
- border-top: 80px solid pink;
- border-left: 60px solid transparent;
- border-right: 60px solid transparent;
- }
左三角形:
Html代码
- #left-triangle {
- width: 0;
- height: 0;
- border-right: 100px solid orange;
- border-top: 50px solid transparent;
- border-bottom: 50px solid transparent;
- }
右三角形:
Html代码
- #right-triangle {
- width: 0;
- height: 0;
- border-left: 100px solid red;
- border-top: 50px solid transparent;
- border-bottom: 50px solid transparent;
- }
梯形:
Html代码
- #trapezium {
- height: 0;
- width: 80px;
- border-bottom: 80px solid blue;
- border-left: 40px solid transparent;
- border-right: 40px solid transparent;
- }
菱形:
Html代码
- #diamond {
- width: 80px;
- height: 80px;
- background: purple;
- margin: 3px 0 0 30px;
- -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%;
- }
长方形:
Html代码
- #rectangle {
- width: 140px;
- height: 80px;
- background: green;
- }
平行四边形:
Html代码
- #parallelogram {
- width: 130px;
- height: 75px;
- background: pink;
- -webkit-transform: skew(20deg);
- -moz-transform: skew(20deg);
- -o-transform: skew(20deg);
- transform: skew(20deg);
- }
多边形:
Html代码
- #twelve-point-star {
- height: 100px;
- width: 100px;
- background: orange;
- position: absolute;
- }
- #twelve-point-star:before {
- height: 100px;
- width: 100px;
- background: orange;
- content:"";
- position: absolute;
- -moz-transform: rotate(30deg);
- -webkit-transform: rotate(30deg);
- -ms-transform: rotate(30deg);
- -o-transform: rotate(30deg);
- transform: rotate(30deg);
- }
- #twelve-point-star:after {
- height: 100px;
- width: 100px;
- background: orange;
- content:"";
- position: absolute;
- -moz-transform: rotate(-30deg);
- -webkit-transform: rotate(-30deg);
- -ms-transform: rotate(-30deg);
- -o-transform: rotate(-30deg);
- transform: rotate(-30deg);
- }
多边形:
Html代码
- #six-point-star {
- position: absolute;
- width: 0;
- height: 0;
- border-left: 50px solid transparent;
- border-right: 50px solid transparent;
- border-bottom: 80px solid red;
- }
- #six-point-star:after {
- content:"";
- position: absolute;
- width: 0;
- height: 0;
- border-left: 50px solid transparent;
- border-right: 50px solid transparent;
- border-top: 80px solid red;
- margin: 30px 0 0 -50px;
- }
多边形3:
Html代码
- #octagon {
- width: 100px;
- height: 100px;
- background: blue;
- }
- #octagon:before {
- height: 0;
- width: 40px;
- content:"";
- position: absolute;
- border-bottom: 30px solid blue;
- border-left: 30px solid white;
- border-right: 30px solid white;
- }
- #octagon:after {
- height: 0;
- width: 40px;
- content:"";
- position: absolute;
- border-top: 30px solid blue;
- border-left: 30px solid white;
- border-right: 30px solid white;
- margin: 70px 0 0 0;
- }
提示:
Html代码
- #speech-bubble {
- width: 120px;
- height: 80px;
- background: purple;
- position: absolute;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- }
- #speech-bubble:before {
- content:"";
- position: absolute;
- width: 0;
- height: 0;
- border-top: 13px solid transparent;
- border-right: 26px solid purple;
- border-bottom: 13px solid transparent;
- margin: 13px 0 0 -25px;
- }
鸡蛋:
Html代码
- #egg {
- display:block;
- width:126px;
- height:180px;
- background-color:green;
- -webkit-border-radius:63px 63px 63px 63px/
- 108px 108px 72px 72px;
- border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
- }
等边三角形:
Html代码
- #eq-triangle {
- width: 0;
- height: 0;
- border-bottom: 104px solid navy;
- border-left: 60px solid transparent;
- border-right: 60px solid transparent;
- }
不完整圆:
Html代码
- .pacman {
- width: 0px;
- height: 0px;
- border-right: 60px solid transparent;
- border-top: 60px solid yellow;
- border-left: 60px solid yellow;
- border-bottom: 60px solid yellow;
- border-top-left-radius: 60px;
- border-top-right-radius: 60px;
- border-bottom-left-radius: 60px;
- border-bottom-right-radius: 60px;
- }
圆相关:
Html代码
- .biohazard {
- width: 0;
- height: 0;
- border-bottom: 60px solid black;
- border-top: 60px solid black;
- border-left: 60px solid yellow;
- border-right: 60px solid yellow;
- -moz-border-radius: 60px;
- -webkit-border-radius: 60px;
- border-radius: 60px;
- }
心形:
Html代码
- #heart {
- position: relative;
- }
- #heart:before, #heart:after {
- position: absolute;
- content: "";
- left: 70px; top: 0;
- width: 70px;
- height: 115px;
- background: red;
- -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%;
-