[英]How to create play button with border-radius?
嗨,我正在尝试制作番茄钟。 我通过删除右边框和增加左边框的宽度来创建一个播放按钮,以创建一个三角形。
我的问题是-如何对其应用边界半径?
https://codepen.io/jenlky/pen/ypQjPa?editors=1100
<div id="all-buttons" class="buttons">
<!-- play button -->
<div id="play" class="play-button"></div>
<!-- pause button -->
<div id="pause">
<div class="line-1"></div>
<div class="line-2"></div>
</div>
<!-- end of play and pause button-->
</div>
.play-button {
z-index: 2;
width: 48px;
height: 48px;
border-style: solid;
border-width: 24px 0px 24px 48px;
border-color: white white white #FF8F83;
}
HTML播放按钮:
.circle_inner{ position: relative; height: 100%; } .circle_inner:before{ content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #000; position: absolute; top: 50px; left: 50%; margin: -10px 0 0 -7px; }
<div class="circle_inner"> </div>
试试这个 (少)
<div class="control play">
<span class="left"></span><span class="right"></span>
</div>
.control {
@color: #ffb160;
@highlight: darken(@color, 10%);
@duration: 0.4s;
@sin: 0.866;
@size: 112px;
border-radius: 50%;
margin: 20px;
padding: @size*0.25;
width: @size;
height: @size;
font-size: 0;
white-space: nowrap;
text-align: center;
cursor: pointer;
&, .left, .right, &:before {
display: inline-block;
vertical-align: middle;
transition: border @duration, width @duration, height @duration, margin @duration;
transition-tiomig-function: cubic-bezier(1, 0, 0, 1);
}
&:before {
content: "";
height: @size;
}
&.pause {
.left, .right {
margin: 0;
border-left: @size*0.33 solid @color;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
height: @size*@sin;
}
.left {
border-right: @size*0.2 solid transparent;
}
}
&.play {
@border: @size/4;
.left {
margin-left: @size/6;
border-left: @size*@sin/2 solid @color;
border-top: @border solid transparent;
border-bottom: @border solid transparent;
border-right: 0px solid transparent;
height: @size - 2*@border;
}
.right {
margin: 0;
border-left: @size*@sin/2 solid @color;
border-top: @border solid transparent;
border-bottom: @border solid transparent;
height: 0px;
}
}
&:hover {
border-color: @highlight;
.left, .right {
border-left-color: @highlight;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.