Help us understand the problem. What is going on with this article?

CSSでりんごを作ってみた。

More than 3 years have passed since last update.

apple.png

桃に見える?

html
<div class="apple"></div>

css
.apple{
  position: relative;
  margin-top: 45px;
  width: 250px;
  height: 240px;
  border-radius: 90% 90% 100% 100% / 90% 100% 100% 100%;
  background: #FD3924;
  box-shadow: 
     2px -4px   3px   0 #AE3C2A inset,
     1px    0   1px   0 #B5553F inset,
     2px    0   2px 2px #D88363 inset,
    -6px  1px  25px 3px #F9F8F7 inset,
    -3px  4px  10px   0 #000;
}

/* 葉っぱ */
.apple:before{
  position: absolute;
  top: -30px;
  left: 51%;
  content: "";
  display: inline-block;
  width: 80px;
  height: 25px;
  border-radius: 60% 0 100% 0 / 100% 0 100% 0;
  background: #4E8920;
  transform: rotate(-5deg);
}

/* 果梗 */
.apple:after{
  position: absolute;
  top: -35px;
  left: 50%;
  content: "";
  display: inline-block;
  width: 10px;
  height: 30px;
  border: 5px solid transparent;
  border-top: 10px solid #9A7229;
  border-right: 8px solid #470800;
  border-radius: 100% 100% 0 0;
  transform: translateX(-75%);
}

解説

実(果実本体):
box-shadowを使って影や光の反射を表現することで立体感を出しています。

葉っぱ:
leaf.png

border-radiusで要素の左上・右下を丸めて作ることができる。

果梗の作り方

sample.png

手順1: このような図形をつくります

.sample{
  width: 10px;
  height: 30px;
  border-top: 10px solid green;
  border-right: 8px solid red;
  border-bottom: 10px solid yellow;
  border-left: 10px solid blue;
  border-radius: 100% 100% 0 0;
}

手順2: border-bottom,border-leftの色を透明(transparent)にする

.sample{
  width: 10px;
  height: 30px;
  border: 10px solid transparent; /* bottom,leftは透明に */
  border-top: 10px solid green;
  border-right: 8px solid red;
  border-radius: 100% 100% 0 0;
}

sample2.png

こんな形になったら完成!
慣れないうちは手順1からやると作りやすいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away