如何用一个div画三个圆环（一个div画一个胡萝卜）

一个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