CSS3でつくれる形いろいろ。

GeckoTang

2011-03-01 00:20:35

License: MIT License

Fork: 1

Fav: 0

View: 1021

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 12 lines
CSS 78 lines

CSS3でつくれる形いろいろ。

CSS3でつくれる形いろいろ。
YUI 3 CSS Reset

[class^="type_"]{
    display:inline-block;
    margin:0 5px 5px 0;
    width:100px;
    height:100px;
    background:#000;
}
.type_1{
    border-radius:50px 50px 50px 50px / 50px 50px 50px 50px;
}
.type_2{
    border-radius:50px 0px 50px 50px / 50px 0px 50px 50px;
}
.type_3{
    border-radius:50px 0px 50px 0px / 50px 0px 50px 0px;
}
.type_4{
    height:50px;
    border-radius:50px 50px 0px 0px / 50px 50px 0px 0px;
}
.type_5{
    width:50px;
    height:50px;
    border-radius:50px 0px 0px 0px / 50px 0px 0px 0px;
}
.type_6{
    width:0;
    height:0;
    background:transparent;
    border-top:50px solid black;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}
.type_7{
    width:0;
    height:0;
    background:transparent;
    border-bottom:50px solid black;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}
.type_8{
    width:0;
    height:0;
    background:transparent;
    border-bottom:50px solid black;
    border-left:50px solid black;
    border-right:50px solid transparent;
}
.type_9{
    width:0;
    height:0;
    background:transparent;
    border-radius:50px;
    border-top:50px solid black;
    border-bottom:50px solid black;
    border-left:50px solid black;
    border-right:50px solid transparent;
}

.type_10{
    width:50px;
    height:100px;
    -webkit-transform-origin:top center;
    border-radius:25px 25px 0 0 / 25px 25px 0 0;
}

.type_11{
    width:50px;
    height:100px;
    border-radius:25px 25px 25px 25px / 25px 25px 100px 100px;
}

.type_12{
    width:30px;
    height:100px;
    border-radius:30px 0px 0px 50px / 100px 0px 0px 50px;
}

<div class="type_1"></div> <div class="type_2"></div> <div class="type_3"></div> <div class="type_4"></div> <div class="type_5"></div> <div class="type_6"></div> <div class="type_7"></div> <div class="type_8"></div> <div class="type_9"></div> <div class="type_10"></div> <div class="type_11"></div> <div class="type_12"></div>[class^="type_"]{ display:inline-block; margin:0 5px 5px 0; width:100px; height:100px; background:#000; } .type_1{ border-radius:50px 50px 50px 50px / 50px 50px 50px 50px; } .type_2{ border-radius:50px 0px 50px 50px / 50px 0px 50px 50px; } .type_3{ border-radius:50px 0px 50px 0px / 50px 0px 50px 0px; } .type_4{ height:50px; border-radius:50px 50px 0px 0px / 50px 50px 0px 0px; } .type_5{ width:50px; height:50px; border-radius:50px 0px 0px 0px / 50px 0px 0px 0px; } .type_6{ width:0; height:0; background:transparent; border-top:50px solid black; border-left:50px solid transparent; border-right:50px solid transparent; } .type_7{ width:0; height:0; background:transparent; border-bottom:50px solid black; border-left:50px solid transparent; border-right:50px solid transparent; } .type_8{ width:0; height:0; background:transparent; border-bottom:50px solid black; border-left:50px solid black; border-right:50px solid transparent; } .type_9{ width:0; height:0; background:transparent; border-radius:50px; border-top:50px solid black; border-bottom:50px solid black; border-left:50px solid black; border-right:50px solid transparent; } .type_10{ width:50px; height:100px; -webkit-transform-origin:top center; border-radius:25px 25px 0 0 / 25px 25px 0 0; } .type_11{ width:50px; height:100px; border-radius:25px 25px 25px 25px / 25px 25px 100px 100px; } .type_12{ width:30px; height:100px; border-radius:30px 0px 0px 50px / 100px 0px 0px 50px; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/zqqK/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/GeckoTang/zqqK" title="CSS3でつくれる形いろいろ。">CSS3でつくれる形いろいろ。 - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code