CSS画一个红苹果( 二 ) _CSS

文章插图

苹果变得更加诱人了。
再做一些细节优化。
第七部：给苹果加个叶柄。
买过西瓜的都知道，叶柄是证明西瓜新鲜与否的标志。苹果亦然。

.petiole {position: absolute;transform: translate(155px, -48px) rotate(35deg);width: 20px;height: 60px;border-top: solid 15px transparent;border-left: solid 10px rgb(162, 76, 9);border-bottom: solid 8px transparent;border-radius: 50%;}.petiole.left {transform: translate(154px, -49px) rotate(35deg);border-left-color: rgb(123, 48, 24);}

<div class="apple"><div class="petiole left"></div><div class="petiole"></div></div>

文章插图

是不是新鲜很多。
最后，我们给苹果加个阴影，看着更加立体一点。

.shadow {position: absolute;width: 300px;height: 270px;background-color: rgba(0, 0, 0, .15);transform-origin: 50% 100%;transform: translate(5px, 5px) skew(60deg) scaleY(.25);border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;box-shadow: 0 0 20px rgba(0, 0, 0, .15);filter: blur(4px);}