cssによるshape

対応ブラウザ:Firefox,Google Chrome,Safari
参考サイト:http://css-tricks.com/examples/ShapesOfCSS/

-円-

heightとwidthは同じ値で、radiusの2倍の値にすると綺麗な円になる。

width: 80px;
height: 80px;
background: #4ac;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;

-上向き三角-

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #4ac;

-下向き三角-

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #4ac;

-横向き三角-

width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #4ac;
border-bottom: 50px solid transparent;

-斜め三角-

width: 0;
height: 0;
border-top: 50px solid #9cc;
border-bottom: 50px solid transparent;
border-left: 50px solid #4ac;
border-right: 50px solid transparent;

-四角-

width: 0;
height: 0;
border-top: 50px solid #9cc;
border-bottom: 50px solid #9cc;
border-left: 50px solid #4ac;
border-right: 50px solid #4ac;

-台形-

width: 100px;
height: 0;
border-bottom: 100px solid #4ac;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

-星型-

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #4ac;
position: relative;
:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #9cc;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

-五角形-

position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #4ac transparent;
:before {
content: "";
position: absolute;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #9cc;
}

-六角形-

width: 100px;
height: 55px;
background: #4ac;
position: relative;
:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #9cc;
}
:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #1cc;
}

-八角形-

width: 100px;
height: 100px;
background: #4ac;
position: relative;
:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid #9cc;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
}
:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid #1cc;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
}

-ハートマーク-

position: relative;
width: 100px;
height: 90px;
:before,
:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #4ac;
-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);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
}
:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

-無限マーク-

position: relative;
width: 212px;
height: 100px;
}
:before,
:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid #4ac;
-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);
transform: rotate(-45deg);
}
:after {
left: auto;
right: 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);
transform:rotate(45deg);
}