共通のcssプロパティ
.displayArea>.pic{
margin-top:20px;
width: 0px;
height:0px;
}
1. CSS3 borderで色々な図形作成
※webkit系ブラウザ(safari,googleChrome等)、moz系ブラウザ(firefox)で確認してください。
1. 図形
.shape01>.pic{
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border:#f60 50px solid;
border:50px solid transparent;
border-color:transparent;
border-top-color:#f60;
}
2. 図形
.shape02>.pic{
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border:#f60 50px solid;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
3. 図形
.shape03>.pic{
border:#f60 50px solid;
border-left:50px solid transparent;
border-bottom:50px solid transparent;
}
4. 図形
.shape04>.pic{
border:#f60 50px solid;
border-left:#f00 50px solid;
border-bottom:50px solid transparent;
}
5. 図形
.shape05>.pic{
border:#f60 50px solid;
border-left:#f00 50px solid;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
}
6. 図形
.shape06>.pic{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border:#f60 50px solid;
border-left:50px solid transparent;
border-right:50px solid transparent;
-webkit-transform:scaleX(1.5);
-moz-transform:scaleX(1.5);
}
7. 図形
.shape07>.pic{
border:#f60 25px solid;
border-top:50px solid transparent;
border-bottm:50px solid transparent;
-moz-transform:scaleX(2);
-webkit-transform:scaleX(2);
}
8. 図形
.shape08>.pic{
position:relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border:#fcef27 50px solid;
border-right:50px solid transparent;
}
.shape08>.pic:before{
content:"";
display:block;
position:absolute;
top:-30px;
border:#000 4px solid;
-webkit-border-radius: 4px;
}
