|
Sunday, July 7th, 2024
Angle left icons
Cascading Style Sheets(CSS)を使用してアイコンを実装します。
ご自由にご利用ください。
Previews
Examples html
<!-- icons -->
<div class="icons">
<span></span>
</div>
<!-- /icons -->
Examples css
/* - icons - */
.icons {
position: relative;
width: 25px;
height: 25px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: rgba(0, 0, 0, 0.0);
cursor: pointer;
}
.icons span {
display: block;
position: absolute;
top: 3.5px;
left: 9px;
width: 18px;
height: 18px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: rgba(0, 0, 0, 0.0);
border-top: 2px solid rgba(0, 0, 0, 1.0);
border-right: 2px solid rgba(0, 0, 0, 1.0);
border-radius: 0;
transform: rotate(-135deg);
transition: all .5s;
}
.icons:hover span {
border-top: 2px solid rgba(192, 192, 192, 1.0);
border-right: 2px solid rgba(192, 192, 192, 1.0);
}
.icons:active span {
border-top: 2px solid rgba(0, 0, 0, 1.0);
border-right: 2px solid rgba(0, 0, 0, 1.0);
}
/* - /icons - */
Summary
最後までご高覧いただきましてありがとうございました。
Cascading Style Sheets(CSS)を使用して実装するアイコンをご紹介させていただきました。
必要に応じて各コードを変更してご自由にご利用ください。
現場からは以上でした。