小程序
小游戏
企业微信
微信支付
扫描小程序码分享
这个按钮怎么做
35 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
灵魂~
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
我会
膜拜，牛逼，大神，我只能这么形容我的心情了，感谢
/*index.wxss*/
page{
padding:0;
margin:0;
}
.content{
width: 400rpx;
height: 400rpx;
position: relative;
margin:100rpx auto;
left: 0;
top:50%;
bottom: 0;
right:0;
box-shadow: 0px 0px 110rpx rgba(180, 180, 180, 0.3) inset,0px 0px 5rpx #D3D3D3;
.quartercircle{
position:absolute;
width: 200rpx;
height: 200rpx;
-webkit-border-radius: 200rpx 0 0 0;
.divLeft{
top: 100px;
transform:rotate(-45deg);
background-color: bisque ;
.divTop{
top: 30px;
left: 70px;
transform:rotate(45deg);
background-color: burlywood ;
.divRight{
left: 140px;
transform:rotate(135deg);
background-color: darkgray ;
.divBottom{
top: 170px;
transform:rotate(-135deg);
background-color: darkkhaki ;
.circle{
width:200rpx;
height:200rpx;
position: absolute;
z-index: 100;
top:100px;
left:70px;
margin:auto;
border-radius: 100%;
background-color: #889900;
text-align: center;
.circle span{
display: block;width: 100%;height: 100%;line-height: 200rpx;font-size: 24rpx;
.quartercircle a{
position: absolute;width: 100%;height: 100%;
background: #888888;
.quartercircle a:hover{
background: #8BFF7C;
/*index.wxml*/
<div class="content" style="">
<div class="quartercircle divLeft" style="">
</div>
<div class="quartercircle divTop" style="">
<div class="quartercircle divRight" style="">
<div class="quartercircle divBottom" style="">
<div class="circle" style=""><span style="">OK</span></div>
谢谢各位的帮助
厉害了！恭喜楼主，目标达成
已完成，谢谢大家的帮助
14楼的代码我已改的差不多了，但是如果我要给每个颜色加事件的话，可以实现吗
#18 wxml的代码呢，复制一下看看，感谢
/* pages/about/about.wxss */ .menuArea{ width: 400rpx; height: 400rpx; position: relative; margin:50rpx auto; } .pa{ position:absolute; width: 200rpx; height: 200rpx; text-align: center; line-height: 200rpx; border-radius: 200rpx 0 0 0; } .pa text{ display: inline-block; transform: rotate(-45deg); } .left{ top: 25%; left: -10%; transform:rotate(-45deg); background-color: bisque ; } .up{ top: -10%; left: 25%; transform:rotate(45deg); background-color: burlywood ; } .right{ top: 25%; left: 60%; transform:rotate(135deg); background-color: darkgray ; } .down{ top: 60%; left: 25%; transform:rotate(-135deg); background-color: darkkhaki ; } .confirm{ width:50%; height:50%; position: absolute; z-index: 100; top:0%; left:0%; bottom:0; right: 0; margin:auto; border-radius: 100%; background-color: #889900; text-align: center; }
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
灵魂~
我会
膜拜，牛逼，大神，我只能这么形容我的心情了，感谢
/*index.wxss*/
page{
padding:0;
margin:0;
}
.content{
width: 400rpx;
height: 400rpx;
position: relative;
margin:100rpx auto;
left: 0;
top:50%;
bottom: 0;
right:0;
box-shadow: 0px 0px 110rpx rgba(180, 180, 180, 0.3) inset,0px 0px 5rpx #D3D3D3;
}
.quartercircle{
position:absolute;
width: 200rpx;
height: 200rpx;
-webkit-border-radius: 200rpx 0 0 0;
}
.divLeft{
top: 100px;
transform:rotate(-45deg);
background-color: bisque ;
}
.divTop{
top: 30px;
left: 70px;
transform:rotate(45deg);
background-color: burlywood ;
}
.divRight{
top: 100px;
left: 140px;
transform:rotate(135deg);
background-color: darkgray ;
}
.divBottom{
top: 170px;
left: 70px;
transform:rotate(-135deg);
background-color: darkkhaki ;
}
.circle{
width:200rpx;
height:200rpx;
position: absolute;
z-index: 100;
top:100px;
left:70px;
margin:auto;
border-radius: 100%;
background-color: #889900;
text-align: center;
}
.circle span{
display: block;width: 100%;height: 100%;line-height: 200rpx;font-size: 24rpx;
}
.quartercircle a{
position: absolute;width: 100%;height: 100%;
background: #888888;
}
.quartercircle a:hover{
background: #8BFF7C;
}
/*index.wxml*/
<div class="content" style="">
<div class="quartercircle divLeft" style="">
</div>
<div class="quartercircle divTop" style="">
</div>
<div class="quartercircle divRight" style="">
</div>
<div class="quartercircle divBottom" style="">
</div>
<div class="circle" style=""><span style="">OK</span></div>
</div>
谢谢各位的帮助
厉害了！恭喜楼主，目标达成
#18 wxml的代码呢，复制一下看看，感谢
/* pages/about/about.wxss */ .menuArea{ width: 400rpx; height: 400rpx; position: relative; margin:50rpx auto; } .pa{ position:absolute; width: 200rpx; height: 200rpx; text-align: center; line-height: 200rpx; border-radius: 200rpx 0 0 0; } .pa text{ display: inline-block; transform: rotate(-45deg); } .left{ top: 25%; left: -10%; transform:rotate(-45deg); background-color: bisque ; } .up{ top: -10%; left: 25%; transform:rotate(45deg); background-color: burlywood ; } .right{ top: 25%; left: 60%; transform:rotate(135deg); background-color: darkgray ; } .down{ top: 60%; left: 25%; transform:rotate(-135deg); background-color: darkkhaki ; } .confirm{ width:50%; height:50%; position: absolute; z-index: 100; top:0%; left:0%; bottom:0; right: 0; margin:auto; border-radius: 100%; background-color: #889900; text-align: center; }