CSS：西瓜

emoking
156 阅读3分钟

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

前言

夏天到了，又到了吃西瓜的季节；今天就教大家一个简单的CSS画西瓜的方法~

先上效果图：

image.png

（好耶，还是无籽瓜）

思路

其实思路就是画三角形的思路，只不过变成了画三角锥，知道怎么画三角形的小伙伴只需要把盒子设border-radius为50%就可以了；

不知道画三角形的小伙伴这里简单介绍一下，如图所示：

image.png

这里简单画了个盒子，不是css实际效果，盒子设置为0，完全由边框构成盒子，盒子会像图中一样，每个三角形就是对应的border，而border的四个方向都是可以分别设置颜色的。

只要设你想要的那个三角形盒子背景颜色，其他三边都设为透明，就可以啦~

西瓜的话，其实就是一个圆形的边框盒子取三角形，然后再加上点颜色边框就完事

代码实现

首先，设一个西瓜盒子

 <div class="watermelon"></div>

然后写样式，先把三角锥画出来

.watermelon {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  border-width: 150px;
  border-style: solid;
  border-color: transparent transparent #FD5B78 transparent;
  background-color: transparent; // 透明边框的底色
  // -------- 以下是让盒子居中，不影响西瓜
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

不出意外的话是这个效果:

image.png

然后加上绿边就行了，绿边的思路是：

设置一个盒子跟西瓜盒子一样大，然后设置边框为绿皮，盒子部分为透明背景色；（也就是画一个同心圆）

这里注意，和西瓜盒子一样大是指，盒子加上边框，所以要设box-sizing为border-box,大概是这么回事儿：

image.png

同心圆那上左右边框的颜色应为透明，为了简单表现没特地画出来；

这里绿边用伪元素来实现：

  .watermelon::before {
      content:'';
      box-sizing: border-box;
      width: 300px;
      height: 300px;
      border-width: 20px;
      border-radius: 50%;
      background-color: transparent;
      border-color: transparent transparent #7FFFAA transparent;
      border-style: solid;
     //------ 定位到左上角
      position: absolute;
      left: -150px;
      top: -150px;
    }

这里要注意，定位的话，是根据盒子来的，边框不算在内，所以定位的初始位置会在西瓜盒子中间，需要手动调到左上角，即left:-border-left-width; top:-border-top-width

不出意外结果就出来了：

image.png

另外，如果想要别的比例的三角形的话，可以通过调节盒子大小、边框的大小来调节，比如：

  • 一扇西瓜：

image.png

.watermelon {
     ...
     border-color: transparent #FD5B78 #FD5B78 transparent;
     transform: rotate(45deg);
}
.watermelon::before {
    ...
    border-color: transparent #7FFFAA #7FFFAA transparent;
}
  • 咬了一小口的西瓜：

image.png

  .watermelon {
     ...
     width: 40px;
     height: 40px;
  }
  .watermelon::before{
    ...
    width:{原来的基础上+40} px
    height:{原来的基础上+40} px
  }

收工！

代码：

另一种方法

换个思路：其实也可以直接画一个同心圆，红底绿边，然后再用一个罩层，该罩层和圆一样大，然后设置不显示的三边边框色为背景色，将底部边框色为透明，即露出底下的小块西瓜~

这个方法可以很方便的画各种角度的西瓜（上面的方法会错位），如：

image.png css代码如下：

.watermelon{
  width: 600px;
  height: 300px;
  border-radius: 50%;
  background-color: #FD5B78;
  border: 20px solid #7FFFAA;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  box-sizing: border-box;
}
.watermelon::before{
  position: absolute;
  top: -20px;
  left: -20px;
  content: '';
  width: 0;
  height: 0;
  border-radius: 50%;
  border-width: 150px;
  border-left-width: 300px;
  border-right-width: 300px;
  border-color:#fff #fff transparent #fff;
  border-style: solid;
}

不多说了大伙自个玩吧

avatar
文章
阅读
粉丝