一个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里边，分别旋转一点角度。
完成！！！！
代码仓库地址：
https://github.com/shb190802/html5
演示地址：
https://suohb.com/demo/win/carrot.html
,
