如何用一个div画三个圆环(一个div画一个胡萝卜)

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

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

先看效果:

如何用一个div画三个圆环(一个div画一个胡萝卜)(1)

第一步:画出红萝卜主体

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; }

如何用一个div画三个圆环(一个div画一个胡萝卜)(2)

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

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

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

这里,我们继续使用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; }

如何用一个div画三个圆环(一个div画一个胡萝卜)(3)

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

后续增加的渐变属性,前边部分是内容是一致的,为了减少代码量,看着美观一点,我们可以适应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; }

如何用一个div画三个圆环(一个div画一个胡萝卜)(4)

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

如何用一个div画三个圆环(一个div画一个胡萝卜)(5)

完成!!!!

代码仓库地址:

https://github.com/shb190802/html5

演示地址:

https://suohb.com/demo/win/carrot.html

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页