ぐるりボタン
戻る
直後に字を書くと横にきます
下に書きたい時は改行してから書いてください
【html(直接css)】<a href="" style="display:inline-block;text-decoration:none;font-weight:bold;"><div style="float:left;margin-top:18px;border:5px solid #f90;border-right:20px solid transparent;border-bottom:20px solid transparent;"></div><div style="display:inline-block;border-radius:50%;border-right:5px solid #fa1; border-bottom: 5px solid #f90;padding:0 20px 0 30px;line-height:30px;margin-left:-23px;color:#000">戻る</div></a>
htmlだけで完結する直接cssのほうが馴染み深いので好きなのですが、疑似要素ver.も載せておきます。
【html】<div class="yajirushi"><a href="">戻る</a></div>
【css】.yajirushi{
display:inline-block;
}
.yajirushi a{
position: relative;
display: inline-block;
border-radius: 50%;
border-right: 5px solid #fa1;
border-bottom: 5px solid #f90;
padding: 0 20px 0 30px;
line-height:30px;
text-decoration: none;
color: #000;
font-weight:bold;
}
.yajirushi a:before{
content: "";
position: absolute;
top: 18px;
left: 0px;
border: 5px solid #f90;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
}
TOP≫SUB≫CSS実験室
＊前←46→次＃