Result
ダイヤモンドの形のボタン。
シンプルに、オブジェクトを回転させ、テキストだけ元の角度に戻してます
css
.container .square {
width: 100px;
height: 100px;
position: absolute;
color: white;
border: 2px solid white;
transform: rotate(45deg);
display: table;
cursor: pointer;
transition: ease 0.5s all;
}
.container .square:hover {
background: white;
color: black;
}
.container .square p {
display: table-cell;
vertical-align: middle;
text-align: center;
transform: rotate(-45deg);
}
.container .square:nth-child(1) {
top: 0;
left: 0;
}
.container .square:nth-child(2) {
bottom: 0;
left: 0;
}
.container .square:nth-child(3) {
right: 0;
top: 0;
}
.container .square:nth-child(4) {
right: 0;
bottom: 0;
}
.container .square:nth-child(5) {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
|
html
<div class='container'>
<div class='square'>
<p>ONE</p>
</div>
<div class='square'>
<p>TWO</p>
</div>
<div class='square'>
<p>THREE</p>
</div>
<div class='square'>
<p>FOUR</p>
</div>
<div class='square'>
<p>FIVE</p>
</div>
</div>
|
via
DIAMONDS
