<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EDITPLUS">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS shape</title>
<style type="text/css" media="screen">
.box {
width: 400px;
height: 400px;
border:1px solid #000;
text-align:center;
float:left;
}
.square {
width: 200px;
height: 200px;
background:red;
margin:80px auto;
}
.rectangle{
width:200px;
height:100px;
background:red;
margin:120px auto;
}
.circle{
width:200px;
height:200px;
background:red;
-moz-border-radius:100px;/* Mozilla-Firefox */
-webkit-border-radius:100px; /* Google, Aplle */
border-radius:100px;
margin: 80px auto;
}
.oval{
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin:120px auto;
}
.semicircle {
height: 100px;
width: 200px;
background: red;
border-radius: 100px 100px 0 0;
margin:120px auto;
}
.triangle_up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
margin: 120px auto;
}
.triangle_down{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid red;
margin: 120px auto;
}
.triangle_left{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:100px solid red;
margin: 120px auto;
}
.triangle_right{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:100px solid red;
margin: 120px auto;
}
.triangle_top_left{
width:0;
height:0;
border-top:100px solid red;
border-right:100px solid transparent;
margin: 120px auto;
}
.triangle_top_right{
width:0;
height:0;
border-top:100px solid red;
border-left:100px solid transparent;
margin: 120px auto;
}
.triangle_bottom_left{
width:0;
height:0;
border-bottom:100px solid red;
border-right:100px solid transparent;
margin: 120px auto;
}
.triangle_bottom_right{
width:0;
height:0;
border-bottom:100px solid red;
border-left:100px solid transparent;
margin: 120px auto;
}
.trapezoid{
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
height:0;
width:100px;
-webkit-transform:skew(0deg); /* this makes shape up on the all-screen chosen*/
margin:120px auto;
}
.parallelogram{
width:150px;
height:100px;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg); /* same as last line */
-o-transform:skew(20deg);/* same as last line */
background:red;
margin:120px auto;
}
.pentagon {
position: relative;
width: 100px;/* bottom shape line */
border-width: 100px 50px 0;/*bottom shape left-right line ; bottom shape top line ; whether add a shape */
border-style: solid;
border-color: red transparent;
margin:150px auto;
}
.pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -170px; /* line height between top shape and bottom shape */
right: -50px;/* whether top shape link with bottom shape */
border-width: 0 100px 70px;/* ; top shape bottom line ; top shape left-right line ; */
border-style: solid;
border-color: transparent transparent red;
}
.rhombic_1 {
width: 0;
height: 0;
border: 80px solid transparent;
border-bottom-color: red;
position: relative;
margin: auto;
}
.rhombic_1:after {
content: '';
position: absolute;
left: -80px;
top: 80px;
width: 0;
height: 0;
border: 80px solid transparent;
border-top-color: red;
}
.rhombic_2 {
width: 0;
height: 0;
border: 70px solid transparent;
border-bottom: 100px solid red;
position: relative;
margin: auto;
}
.rhombic_2:after {
content: '';
position: absolute;
left: -70px;
top: 100px;
width: 0;
height: 0;
border: 70px solid transparent;
border-top: 100px solid red;
}
.hexagon {
width: 200px;
height: 90px;
background: red;
position: relative;
margin:130px auto;
}
.hexagon:before {
content: "";
position: absolute;
top: -60px;/* height of shape */
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;/* 1/2 of .hexagon_width */
border-right: 100px solid transparent;/* 1/2 of .hexagon_width */
border-bottom: 60px solid red; /* equal to .hexagon:before_top */
}
.hexagon:after {
content: "";
position: absolute;
bottom: -60px;/* height of shape */
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 60px solid red; /* equal to .hexagon:after_bottoom */
}
.octagon {
width: 150px;
height: 72px;
background: red;
position: relative;
margin:150px auto;
}
.octagon:before {
content: "";
top:-45px;
left:0px;
width:60px;
position: absolute;
border-color:transparent transparent red transparent;
border-width:0px 45px 45px 45px ; /* line-space ; left ; height ; right */
border-style: solid;
}
.octagon:after {
content: "";
top:72px;
width:60px;
left:0px;
position: absolute;
border-color:red transparent transparent transparent;
border-width: 45px 45px 0 45px ;/* height ; right ; unknow ; left */
border-style: solid;
}
.star_five {
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;/* right_bottom */
border-bottom: 70px solid red;/* left_up and right_bottom width*/
border-left: 100px solid transparent;/* left_up */
-webkit-transform: rotate(35deg); /* angle of rotation */
/* -moz-transform: rotate(35deg); */
/* -ms-transform: rotate(35deg);
-o-transform: rotate(35deg); */
margin:120px auto;
}
.star_five:before {
position: absolute;
display: block;
height: 0;
width: 0;
top: -45px;
left: -65px;
content: '';
border-bottom: 80px solid green;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-webkit-transform: rotate(-35deg);
/* -moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg); */
}
.star_five:after {
position: absolute;
display: block;
color: red;
content: '';
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
/* -moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg); */
}
.star_six {
width: 0;
height: 0;
position: relative;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
margin:100px auto;
}
.star_six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
.cross {
background: red;
height: 100px;
position: relative;
width: 20px;
margin:120px auto;
}
.cross:after {
background: red;
content: "";
height: 20px;
left: -40px;
position: absolute;
top: 40px;
width: 100px;
}
.moon {
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 20px 15px 0 0 red;
margin:80px auto;
}
.cone {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 100px solid red; /* this depends whether tip point to */
评论0