cssのみで 「早送り」 アイコンを作成してみました。しばらくはコントロール系を作ってみようと思います。
ソース
html
<div class="forward"></div>
css
/* 円 */ .forward { font-size: 100px; position: relative; width: 1.4em; height: 1.4em; border: 0.1em solid #39a9d6; border-radius: 100%; } /* マーク左 */ .forward::before { content: ""; position: absolute; top: 0.3em; left: 0.4em; width: 0; height: 0; border-top: 0.4em solid transparent; border-left: 0.4em solid #39a9d6; border-bottom: 0.4em solid transparent; } /* マーク右 */ .forward::after { content: ""; position: absolute; top: 0.3em; left: 0.7em; width: 0; height: 0; border-top: 0.4em solid transparent; border-left: 0.4em solid #39a9d6; border-bottom: 0.4em solid transparent; }