小程序wxss纯样式画太极

最新推荐文章于 2024-05-20 22:23:58 发布

sy_有太阳的向日葵

最新推荐文章于 2024-05-20 22:23:58 发布

阅读量82

点赞数

文章标签：小程序 css 前端

本文链接：https://blog.csdn.net/qq_54147492/article/details/130401951

版权

参考链接：纯CSS绘制太极图 - 掘金 (juejin.cn)

css3之border-radius理解 - 吃火鸡的馒头 - 博客园 (cnblogs.com)

画图思路

效果图

代码

wxml

<view style="font-size: 100rpx;">太极</view>
<view class="box">
  <view class="box1">
    <view class="box3"></view>
  </view>
  <view class="box2">
    <view class="box4"></view>
  </view>
</view>

wxss

/* pages/time13/time13.wxss */
.box{
  width: 600rpx;
  height: 600rpx;
  border: 50rpx solid #00ffff; 
  border-radius: 50%;
  position: relative;
}
.box view{
  position: absolute;
}
.box1{
  background-color: #eee;
  width: 600rpx;
  height: 300rpx;
  top: 0;
  border-radius: 150px 150px 0 0 ;
  position: relative;
  /* border-radius: 50%; */
}
.box2{
  background-color: #000;
  width: 600rpx;
  height: 300rpx;
  bottom: 0;
  border-radius: 0 0 150px 150px;
  position: relative;
}
.box3{
  width: 120rpx;
  height: 120rpx;
  border: 90rpx solid #eee;
  /* background: #eee */
  /* background-color: #00ff00; */
  background-color: #000;
  border-radius: 50%;
  left: 0;
  top: 50%;
  margin-bottom: -100rpx;
  z-index: 2;
}
.box4{
  /* width: 300rpx;
  height: 300rpx; */
  width: 120rpx;
  height: 120rpx;
  border: 90rpx solid #000;
  /* background-color: #00ff00; */
  background-color: #eee;
  border-radius: 50%;

  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -300rpx;
}