一个div可以做什么呢？画个方块？画个圆？

今天，教大家使用一个div画一个胡萝卜。

先看效果：

第一步：画出红萝卜主体

1、使用border-radius先画出胡萝卜的形状；

2、使用linear-gradient填充横向的线性渐变；

.carrot {  position: absolute;  width: 80px;  height: 300px;  background: linear-gradient(to right, #ff7f50, rgba(255, 99, 71, .45), #ff7f50);  border-radius: 25px 25px 40px 40px/40px 40px 210px 200px;}

只需要这么少的代码，一个完美的水洗胡萝卜就基本成型了。

第二步：我们给红萝卜增加一些根须的细节

胡萝卜上有很多根须，在清洗干净后，留下的是一堆横向的疤痕。

这里，我们继续使用linear-gradient给backgroud增加很多横向的条纹，多个linear-gradient使用逗号隔开。

.carrot {  position: absolute;  width: 80px;  height: 300px;  transform: rotate(20deg);  background: linear-gradient(to right, #ff7f50, rgba(255, 99, 71, .45), #ff7f50),    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 10px 31px/30px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 20px 66px/30px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 32px 46px/30px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 17px 93px/30px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 40px 111px/30px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 22px 132px/33px 2px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 32px 155px/21px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 10px 182px/30px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 31px 209px/25px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 35px 231px/17px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 24px 253px/28px 1px,    linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat 20px 276px/20px 1px;  border-radius: 25px 25px 40px 40px/40px 40px 210px 200px;}

随机位置划上长短不一的条纹，是不是更加生动了。

后续增加的渐变属性，前边部分是内容是一致的，为了减少代码量，看着美观一点，我们可以适应css变量。var

.carrot {  position: absolute;  width: 80px;  height: 300px;  --line: linear-gradient(to right, rgba(255, 99, 71, .1), rgba(255, 99, 71, .5), rgba(255, 99, 71, .1))no-repeat;  background: linear-gradient(to right, #ff7f50, rgba(255, 99, 71, .45), #ff7f50),    var(--line)10px 31px/30px 1px,    var(--line)20px 66px/30px 1px,    var(--line)32px 46px/30px 1px,    var(--line)17px 93px/30px 1px,    var(--line)40px 111px/30px 1px,    var(--line)22px 132px/33px 2px,    var(--line)32px 155px/21px 1px,    var(--line)10px 182px/30px 1px,    var(--line)31px 209px/25px 1px,    var(--line)35px 231px/17px 1px,    var(--line)24px 253px/28px 1px,    var(--line)20px 276px/20px 1px;  border-radius: 25px 25px 40px 40px/40px 40px 210px 200px;}

这样看代码是不是清爽多了。

此时基本上已经完成95%的胡萝卜了。为了看上去更精致，我们给红萝卜加上叶子。

第三步：给胡萝卜加上叶子

这里使用到了div的before和after伪元素。

1、继续使用background支持多个img的特性，使用radial-gradient画出渐变的椭圆。

2、多个椭圆叠加在一起，叠加出来叶子的雏形

3、最上边使用一个深色的椭圆画出一根叶梗

.carrot::after {  position: absolute;  top: -120px;  left: -10px;  width: 100px;  height: 120px;  content: '';  background:    radial-gradient(#228b22 14px, transparent 0) no-repeat 39px 55px/28px 70px,    radial-gradient(#556b2f 14px, transparent 0) no-repeat 35px 55px/30px 70px,    radial-gradient(#228b22 18px, transparent 0) no-repeat 24px 90px/50px 40px,    radial-gradient(#228b22 18px, transparent 0) no-repeat 40px 70px/50px 40px,    radial-gradient(#228b22 18px, transparent 0) no-repeat 12px 70px/50px 40px,    radial-gradient(#228b22 18px, transparent 0) no-repeat 40px 60px/50px 30px,    radial-gradient(#228b22 18px, transparent 0) no-repeat 9px 55px/50px 40px,    radial-gradient(#228b22 18px, transparent 0) no-repeat 45px 40px/50px 40px,    radial-gradient(#228b22 18px, transparent 0) no-repeat 20px 30px/50px 60px;  filter: drop-shadow(0 0 3px #000);  transform-origin: center bottom;}

将after的内容复制一份放在before里边，分别旋转一点角度。

完成！！！！

代码仓库地址：

演示地址：