CSSシェイプ

基本図形

四角形

サンプル

ソースコード

.square {
   width: 100px;
   height: 100px;
   background: black;
}

サンプル

ソースコード

.circle {
   width: 100px;
   height: 100px;
   background: black;
   border-radius: 50px;
}

角丸四角形

サンプル

ソースコード

.square2 {
   width: 100px;
   height: 100px;
   background: black;
   border-radius: 40px 0 40px 0; /*左上,右下に40px*/
}

三角形

サンプル

ソースコード

.triangle {
    width: 0px;
    height: 0px;
    background: transparent;
    border-bottom: 150px solid black;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。