SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【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://cssshapes.iweb.uz/

http://www.paulund.co.uk/how-to-create-different-shapes-in-css

関連するメモ

コメント