原文出处:https://blog.csdn.net/iteye_18428/article/details/82324472 (详见原文)
html
<section class="playContainer">
<li class="playBtn">
<a href="#" title="start">Start</a>
</li>
<li class="pauseBtn">
<a href="#" title="pause">Pause</a>
</li>
<li class="stopBtn">
<a href="#" title="stop">Stop</a>
</li>
<li class="forwardBtn playBtn">
<a href="#" title="forward">Forward</a>
<a href="#" title="forward">Forward</a>
</li>
<li class="rewindBtn">
<a href="#" title="rewind">Rewind</a>
<a href="#" title="rewind">Rewind</a>
</li>
<li class="ejectBtn">
<a href="#" class="arrow">Eject</a>
<a href="#" class="dash">Eject</a>
</li>
</section>
css
.playContainer {
position: relative;
float: left;
background: rgba(0, 0, 0, 0.8);
padding: 20px;
}
.playContainer li {
position: relative;
float: left;
border: 25px solid #404040;
color: #404040;
height: 0;
width:0;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
margin: 0 20px;
}
.playContainer a {
border-style: solid;
text-indent: -9999px;
position: absolute;
top: -8px;
left: -3px;
}
.playBtn a {
border-color: transparent transparent transparent #fff;
border-width: 8px 0 8px 12px;
width: 0;
height: 0;
}
.pauseBtn a {
border-color: transparent white;
border-width: 0 6px;
height: 15px;
width: 6px;
left: -9px;
}
.stopBtn a {
border: 7px solid #fff;
height: 0;
width: 0;
left: -7px;
top: -7px;
}
.forwardBtn a {
border-left-width: 8px;
left: 1px;
}
.forwardBtn a:first-child {
margin-left: -7px;
}
.rewindBtn a {
border-width: 8px 8px 8px 0;
border-color: transparent #fff transparent transparent;
width: 0;
height: 0;
}
.rewindBtn a:first-child {
margin-left: -7px;
}
.ejectBtn a.arrow {
border-width: 0 8px 8px 8px;
border-color: transparent transparent #fff transparent;
top:-26px;
left:-8px;
}
.ejectBtn a.dash {
border-width: 0 0 4px;
border-color: transparent transparent #fff;
height: 0;
width:16px;
left: -8px;
top: 4px;
}