「兔了个兔」创意投稿大赛——html+css绘制新春海报

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

春节将至，今天使用html+css来绘制一张新春海报，具体设计有参考了网上的海报图，最终实现的效果图：

代码放在了码上掘金

使用ps加工图片

首先解决那只兔子的问题，将网络素材图片导入ps，使用快速魔棒工具将大兔子选中，然后在右击选择取消反转，退格键去掉就得到了大兔子

再使用裁剪工具裁去多余的部分，最后将图片导出作为使用准备

绘制组成数字的几何图形

组成数字用到的图形只有半圆，1/4圆和直角三角形

半圆的绘制使用border-radius，border-radius的四个参数分别代表左上，右上，右下，右左，而我们需要绘制的是上半圆，只需设置左上和右上的值，并且值为块的高度就行了

<div class="semiCircleTop"></div>

.semiCircleTop{
  width: 152px;
  height: 75px;
  border-radius: 75px 75px 0 0;
  background: pink;
}

1/4圆也是使用border-radius绘制出来，不过1/4圆要宽高相同为正方形，border-radius设置一个对应的值就行了

<div class="quarterCircleTopLeft"></div>
<div class="quarterCircleTopRight"></div>
<div class="quarterCircleBottomRight"></div>

.quarterCircleTopLeft{
  width: 75px;
  height: 75px;
  border-radius: 75px 0 0 0;
  background: pink;
}
.quarterCircleTopRight{
  width: 75px;
  height: 75px;
  border-radius: 0 75px 0 0;
  background: pink;

}
.quarterCircleBottomRight{
  width: 75px;
  height: 75px;
  border-radius: 0 0 75px 0;
  background: pink;
}

最后就是三角形了，css绘制三角形可以通过三种方法绘制

第一种是border边框属性，宽高为0，设置border的上下左右

<div class="triangle"></div>

.triangle{
  width: 0;
  height: 0;
  border-left: 50px solid red;
  border-bottom: 50px solid green;
  border-top: 50px solid yellow;
  border-right: 50px solid pink;
}

只需将我们需要的设为同一个颜色，不需要的设为透明色就可以得到一个直角三角形了

<div class="triangle"></div>
.triangle{
  width: 0;
  height: 0;
  border-left: 50px solid red;
  border-bottom: 50px solid red;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
}

第二种是通过线性渐变来绘制，指定两种颜色朝一个角度的渐变效果，颜色还可以设置高度，这样会使元素的一半呈红色

.triangle{
  width: 75px;
  height: 75px;
  background-image: linear-gradient(45deg,red 50% , rgba(255,255,255,0) 50%);
}

第三种方法就是clip-path，它是最精简和最可具扩展性的，不过要考虑浏览器是否兼容，通过clip-path可以绘制多边形，三角形有三个顶点，三个顶点的内部图案会被保留下来，而外部的则被隐藏掉

.triangle{
  width: 75px;
  height: 75px;
  clip-path: polygon(0 0, 100% 100%, 0% 100%);
  background: pink;
}

但是考虑到三角形我需要用到渐变颜色，前面两种实现不了只好使用clip-path来绘制三角形了

最终

几何图形的背景都换成了渐变颜色，html标签只需要布局好，再添加对应的类名就行了，背景颜色设置为深一点的红色，但是还缺少点磨砂感，body标签在添加一个伪元素，使用background-image导入一张蒙层图片，磨砂感就出来了