どうも7noteです。なんか偶然の副産物でできてしまったので、記事にしてみました。

※ちなみに筆者はあんこが苦手なのでどら焼きは食べません。

完成図

ソース

index.html

<div class="dorayaki"></div>

style.css

.dorayaki {
  height: 60px;          /* どらやきの大きさ */
  width: 75px;           /* どらやきの大きさ */
  position: relative;    /* 疑似要素たちの基準値とする */
}

/* 上の生地と下の生地の共通CSS */
.dorayaki::before, .dorayaki::after {
  content: "";          /* 疑似要素では必須の指定 */
  display: block;       /* ブロック要素に変更 */
  width: 100%;          /* オススメ値 */
  height: 90%;          /* オススメ値 */
  position: absolute;   /* 相対位置に指定 */
  left: 0;              /* 左からの距離は0の位置 */
  border-radius: 100%;  /* 丸くないとどら焼きじゃないので */
}

/* 下の生地 */
.dorayaki::before {
  background: #B6733A;  /* ほどよい美味しそうな色を指定 */
  box-shadow: 0 -2px 2px 2px rgba(255,255,255,0.4) inset;  /* 生地の淵をほんのり薄い色にする */
  top: 13%;             /* 上の生地よりも少し前に出ているようにみせるため */
}

/* 上の生地 */
.dorayaki::after {
  background: radial-gradient(at 40% 80%,#CF924D,#CF924D 30%, #B6733A);  /* 光が当たっているように見せかけるため、円形グラデーションで生地の色を指定 */
  box-shadow: 0 8px 1px -5px rgba( 0, 0, 0, 0.8), inset 0 -2px 2px 2px rgba(255,255,255,0.4);  /* あんこの部分の表現、生地の淵をほんのり薄い色にする */
  top: 0;     /* こちらは0を指定 */
}