🐵
【css】cssだけでくの字の矢印をつくる
ジェネレーターを使えば良いんだけど、自分で法則を見つけたかった、、、、けど無理だった。
1.htmlを記述する
<span class="arrow-left"></span>
<span class="arrow-right"></span>
<span class="arrow-top"></span>
<span class="arrow-bottom"></span>
2.cssを記述する
[class^="arrow"]{
position: relative;
display: inline-block;
width: 40px;
height: 40px;
background: #333333;
border: 2px solid #333333;
border-radius: 4px;
cursor: pointer;
transition: .5s;
}
[class^="arrow"]::before {
position: absolute;
display: block;
width: 20px;
height: 20px;
content: "";
border-top: 3px solid #ffffff;
border-right: 3px solid #ffffff;
transition: .5s;
}
[class^="arrow"]:hover{
background: #ffffff;
}
[class^="arrow"]:hover::before{
border-color: #333333;
}
/* 左向き */
.arrow-left::before{
top:9px;/* widthの1/2ぐらい */
left: 15px;/* topの1.5 */
transform: rotate(-135deg);
}
/* 右向き */
.arrow-right::before{
top:9px;/* widthの1/2 ぐらい*/
right: 15px;/* topの1.5 */
transform: rotate(45deg);
}
/* 上向き */
.arrow-top::before{
top:15px;/* leftの1.5 */
left: 9px;/* widthの1/2ぐらい */
transform: rotate(-45deg);
}
/* 下向き */
.arrow-bottom::before{
bottom:15px;/* leftの1.5 */
left: 9px;/* widthの1/2ぐらい */
transform: rotate(135deg);
}
3.サンプル
参考
Discussion