[CSS] CSS3 Shapes - Diamond, Hexagon, Point Burst : norm

CSSだけで色々な形をつくる方法です。画像をマスクのように切り取ったようにもできます。角丸やグラーデーションが簡単にCSSでできるようになったように、グラフィックソフトだと簡単につくれるこのような形も将来的に簡単なCSSだけで実現できるようになるかも。border-burst:24;とか。六角形は1:√3（1:1.7320508）の矩形を3つ60度ずつ回転させてつくっているので比率さえ変えなければ、大きさを自由に変えられます。

DEMO

ダイヤ（マスク）

ダイヤ丸（マスク）

長方形丸（マスク）

六角形

new

六角形丸

new

六角形（マスク）

トゲトゲ 24

new

トゲ丸 24

new

トゲトゲ 36

new

HTML








new

new


 
  
 



 new



 new



 
  new

CSS

*, *:before, *:after {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}
/* -------------------- ダイヤ（マスク） -------------------- */
.diamond {
 position:relative;
 top:1em;
 left:2em;
 width:8em;
 height:8em;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 overflow:hidden;
}
.diamond img {
 position:relative;
 top:-3em;
 left:-2em;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
/* -------------------- ダイヤ丸（マスク） -------------------- */
.square-rnd {
 border-radius:1em;
}
/* -------------------- 長方形丸（マスク） -------------------- */
.rectangle {
 display:inline-block;
 position:relative;
 top:1.5em;
 left:.5em;
 width:8em;
 height:4em;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 overflow:hidden;
}
.rectangle img {
 position:relative;
 top:-3em;
 left:-2em;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}
/* -------------------- 六角形 -------------------- */
.hexagon, .hexagon:before, .hexagon:after {
 display: table;
 position: relative;
 top:2em;
 height: 5em;
 width: 8.66em;
 background: #ffde17;
 text-align:center;
 text-transform:uppercase;
 color:#fff;
 z-index: 1;
}
.hexagon:before, .hexagon:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}
.hexagon:before {
 -ms-transform: rotate(60deg);
 -webkit-transform: rotate(60deg);
 transform: rotate(60deg);
}
.hexagon:after {
 -ms-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
 transform: rotate(-60deg);
}
.hexagon span {
 display:table-cell;
 vertical-align:middle;
}
/* -------------------- 六角形丸 -------------------- */
.hex-rnd, .hex-rnd:before, .hex-rnd:after {
 border-radius:.3em/.6em;
}
/* -------------------- 六角形（マスク） -------------------- */
.hexagon-mask {
 position:relative;
 top:-4em;
 width: 8.5em;
 height: 17em;
 -webkit-transform: rotate(120deg);
 -ms-transform: rotate(120deg);
 transform: rotate(120deg);
 overflow: hidden;
}
.hexagon-mask > div, .hexagon-mask > div > div {
 width: 100%;
 height: 100%;
 -webkit-transform: rotate(-60deg);
 -ms-transform: rotate(-60deg);
 transform: rotate(-60deg);
 overflow: hidden;
}
.hexagon-mask img {
 position:relative;
 top:.8em;
 left:-.5em;
}
/* -------------------- トゲトゲ 24 -------------------- */
.burst-24 {
 position: relative;
 top:1em;
 left:1.5em;
 text-align: center;
 text-transform:uppercase;
 color:#fff;
 -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 z-index: 1;
}
.burst-24, .burst-24:before, .burst-24:after, .burst-24 > div, .burst-24 > :before, .burst-24 > :after {
 height: 6em;
 width: 6em;
 background: #ffde17;
}
.burst-24:before, .burst-24:after, .burst-24 > div, .burst-24 > :before, .burst-24 > :after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}
.burst-24:before, .burst-24 > :before {
 -webkit-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
 transform: rotate(15deg);
}
.burst-24:after, .burst-24 > :after {
 -webkit-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 transform: rotate(30deg);
}
.burst-24 > div {
 display:table;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 z-index:2;
}
.burst-24 span {
 display:table-cell;
 vertical-align:middle;
}
/* -------------------- トゲ丸 24 -------------------- */
.burst-rnd, .burst-rnd:before, .burst-rnd:after, .burst-rnd div, .burst-rnd div:before, .burst-rnd div:after {
 border-radius: 10px;
}
/* -------------------- トゲトゲ 36 -------------------- */
.burst-36 {
 position: relative;
 top:1em;
 left:1.5em;
 text-align: center;
 text-transform:uppercase;
 color:#fff;
 -webkit-transform: rotate(-60deg);
 -ms-transform: rotate(-60deg);
 transform: rotate(-60deg);
 z-index: 1;
}
.burst-36, .burst-36:before, .burst-36:after, .burst-36 div, .burst-36 div:before, .burst-36 div:after {
 height: 6em;
 width: 6em;
 background: #ffde17;
}
.burst-36:before, .burst-36:after, .burst-36 div, .burst-36 div:before, .burst-36 div:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}
.burst-36:before, .burst-36 div:before {
 -webkit-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 transform: rotate(10deg);
}
.burst-36:after, .burst-36 div:after {
 -webkit-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 transform: rotate(20deg);
}
.burst-36 div {
 -webkit-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 transform: rotate(30deg);
 z-index:2;
}
.burst-36 > div > div {
 display:table;
}
.burst-36 span {
 display:table-cell;
 vertical-align:middle;
}

[CSS] CSS3 Shapes - Diamond, Hexagon, Point Burst