CSS3のborder-radiusやtransformなどを利用して、CSSだけで円形、三角形、台形、星形などのオブジェクトを表現する方法のまとめです。
円形
|
1 2 3 4 5 6 7 8 |
#circle { width: 100px; height: 100px; background: #dd0000; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } |
三角形
|
1 2 3 4 5 6 7 |
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #dd0000; } |
台形
|
1 2 3 4 5 6 7 |
#trapezoid { width: 100px; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #dd0000; } |
星形
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
#star-five { margin: 50px 0; position: relative; display: block; color: #dd0000; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -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; 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); content: ''; } |
参考ページ
The Shapes of CSS
コメント