西瓜篇

“我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛”

夏天最先想到的就是吃冰镇西瓜，把西瓜切成2份，一整块用小勺勺挖这吃，简直不要太快乐，所以就想着画了西瓜这个主题。

重点

首先把西瓜的形状画出来，西瓜芯，红色部分和偏白色部分，再加西瓜皮的绿色，然后画西瓜籽，通过定位放到不同的地方，这样一个西瓜就出来啦。这里画了切成两种形状的西瓜，只要把西瓜形状改变下就可以啦。

三角形的：

.zz{
 width: 0;
  height: 0;
  border-left: 69px solid transparent;  
  border-right: 69px solid transparent;  
  border-bottom: 120px solid #DE3B2D;
  position: relative;
  left: 200px;
  top: 200px;
}

圆形的：

.yuan{
  background-color: #DD3A34;
  width: 200px;
  height: 200px;
  border-radius: 150px;
  position: relative;
  left: 500px;
  border: 10px solid #97A888;
}

div

<div id="app">
  <div class="title">西瓜篇</div>
  <div class="zz">
    <div class="zi"></div>
    <div class="zia"></div>
    <div class="zib"></div>
    <div class="pi"></div>
    <div class="pia"></div>
    <div></div>
  </div>
</div>
<div class="yuan">
  <div class="diana"></div>
  <div class="dianb"></div>
  <div class="dianc"></div>
  <div class="diand"></div>
</div>

css

#app{
  background-color: #fff;
  width: 100%;
  height: 600px;
}
.title{
  text-align: center;
  margin-top: 50px;
}
.zz{
 width: 0;
  height: 0;
  border-left: 69px solid transparent;  
  border-right: 69px solid transparent;  
  border-bottom: 120px solid #DE3B2D;
  position: relative;
  left: 200px;
  top: 200px;

}
.zi{
  background-color: #000;
  border-radius: 20px;
  width:10px;
  height:10px;
  position: absolute;
  top: 90px;
}
.zia{
  background-color: #000;
  border-radius: 20px;
  width:10px;
  height:10px;
  position: absolute;
  top: 90px;
  left: 20px;
}
.zib{
  background-color: #000;
  border-radius: 20px;
  width:10px;
  height:10px;
  position: absolute;
  top: 90px;
  left: -25px;
}
.pi{
  width: 138px;
  height: 8px;
  background-color: #B6A88C;
  opacity: 0.5;
  position: absolute;
  top: 120px;
  left: -68px;
}
.pia{
   width: 138px;
  height: 5px;
  background-color: #2E500F;
  opacity: 0.5;
  position: absolute;
  top: 128px;
  left: -68px;
}
.yuan{
  background-color: #DD3A34;
  width: 200px;
  height: 200px;
  border-radius: 150px;
  position: relative;
  left: 500px;
  border: 10px solid #97A888;
}
.diana{
  background-color: #000;
  border-radius: 20px;
  width:10px;
  height:10px;
  position: absolute;
  top: 90px;
  left: 35px;
}
.dianb{
  background-color: #000;
  border-radius: 20px;
  width:10px;
  height:10px;
  position: absolute;
  top: 50px;
  left: 125px;
}
.dianc{
  background-color: #000;
  border-radius: 20px;
  width:10px;
  height:10px;
  position: absolute;
  top: 110px;
  left: 105px;
}
.diand{
  background-color: #000;
  border-radius: 20px;
  width:10px;
  height:10px;
  position: absolute;
  top: 140px;
  left: 80px;
}

代码块

码上掘金 (juejin.cn)

截图