【css】いろんな形をスタイルシートで
四角
.square {
width:100px;
height:100px;
border:1px solid #000;
background:yellow;
}
平行四辺形
.parallelogram {
width:100px;
height:100px;
border:1px solid #000;
background:yellow;
transform: skew(20deg);
-o-transform: skew(20deg);
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
平行四辺形
.parallelogramRight {
width:100px;
height:100px;
border:1px solid #000;
background:yellow;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
正方形（45度回転）
.diamond {
width:100px;
height:100px;
border:1px solid #000;
background:yellow;
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%;
}
長方形
.rectangle {
width:100px;
height:60px;
border:1px solid #000;
background:yellow;
}
台形
.trapez {
width:100px;
height:0;
border-bottom:100px solid blue;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
台形
.trapez2 {
width:100px;
height:0;
border-top:100px solid blue;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
台形
.trapez3 {
width:0;
height:100px;
border-right:100px solid blue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
}
台形
.trapez4 {
width:0;
height:100px;
border-left:100px solid blue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
}
三角形
.triangle {
width:0;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
三角形
.triangleRight {
width:0;
height:0;
border-left:100px solid red;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}
三角形
.triangleDown {
width:0;
height:0;
border-top:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
三角形
.triangleLeft {
width:0;
height:0;
border-right:100px solid red;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}
半円
.halfCircle {
height:45px;
width:90px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background:green;
}
半円
.halfCircleRight {
height:90px;
width:45px;
border-radius: 0 90px 90px 0;
-moz-border-radius: 0 90px 90px 0;
-webkit-border-radius: 0 90px 90px 0;
background:green;
}
半円
.halfCircleLeft {
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
-moz-border-radius: 90px 0 0 90px;
-webkit-border-radius: 90px 0 0 90px;
background:green;
}
半円
.halfCircleBottom {
height:45px;
width:90px;
border-radius: 0 0 90px 90px;
-moz-border-radius: 0 0 90px 90px;
-webkit-border-radius: 0 0 90px 90px;
background:green;
}
円
.circle {
height:45px;
width:45px;
border-radius: 45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
background:green;
}
楕円
.oval {
height:45px;
width:180px;
border-radius: 90px / 45px;
-moz-border-radius:90px / 45px;
-webkit-border-radius: 90px / 45px;
background:green;
}
1/4円
.quarterCircleTopLeft {
width:100px;
height:100px;
border:1px solid #000;
background: orange;
border-radius: 90px 0 0 0;
-moz-border-radius: 90px 0 0 0;
-webkit-border-radius: 90px 0 0 0;
}
1/4円
.quarterCircleTopRight {
width:100px;
height:100px;
border:1px solid #000;
background: orange;
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
}
1/4円
.quarterCircleBottomLeft {
width:100px;
height:100px;
border:1px solid #000;
background: orange;
border-radius: 0 0 90px 0;
-moz-border-radius: 0 0 90px 0;
-webkit-border-radius: 0 0 90px 0;
}
1/4円
.quarterCircleBottomRight {
width:100px;
height:100px;
border:1px solid #000;
background: orange;
border-radius: 0 0 0 90px;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
}
3/4円
.chartTop {
width:0;
height:0;
border-right:60px solid purple;
border-top:60px solid transparent;
border-left:60px solid purple;
border-bottom:60px solid purple;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
}
3/4円
.chartRight {
width:0;
height:0;
border-right:60px solid transparent;
border-top:60px solid purple;
border-left:60px solid purple;
border-bottom:60px solid purple;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
}
3/4円
.chartBottom {
width:0;
height:0;
border-right:60px solid purple;
border-top:60px solid purple;
border-left:60px solid purple;
border-bottom:60px solid transparent;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
}
3/4円
.chartLeft {
width:0;
height:0;
border-right:60px solid purple;
border-top:60px solid purple;
border-left:60px solid transparent;
border-bottom:60px solid purple;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
}
三角形
.triangleTopLeft {
width:0;
height:0;
border-right:50px solid transparent;
border-top:50px solid red;
border-left:50px solid red;
border-bottom:50px solid transparent;
}
三角形
.triangleTopRight {
width:0;
height:0;
border-right:50px solid red;
border-top:50px solid red;
border-left:50px solid transparent;
border-bottom:50px solid transparent;
}
三角形
.triangleBottomLeft {
width:0;
height:0;
border-right:50px solid transparent;
border-top:50px solid transparent;
border-left:50px solid red;
border-bottom:50px solid red;
}
三角形
.triangleBottomRight {
width:0;
height:0;
border-right:50px solid red;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
リボン
.bookmarkRibbon {
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
}
参考
:after、:before なども活用すると、星型などさまざまな図形も描ける。
http://www.indaam.com/projects/css/neo-sample/
http://codepen.io/html5web/pen/zkctp
http://www.paulund.co.uk/how-to-create-different-shapes-in-css
コメント