效果展示
Demo代码
wxml
<view class="circle"></view>
wxss
page{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #251f44;
}
.circle {
width: 50px;
height: 50px;
border-radius: 100%;
background: #e04747;
position: relative;
cursor: pointer;
}
.circle::before {
content: "";
position: absolute;
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) rotate(15deg);
height: 15px;
width: 75px;
border: 3px solid white;
border-top: 0;
}