CSSで傘をつくる。

<div class="umbrella black">J</div>

CSS

.umbrella{
  position: absolute;
  top: 50%; left: 50%;

  width: 100px;
  height: 100px;
  border-radius: 100%;

  background-image: 
    linear-gradient(to bottom,currentColor 50%,transparent 50%),
    radial-gradient(circle at center center, currentColor 25%,transparent 25%);

  background-repeat: repeat-x; 

  background-position: center center;
  background-size: 
    auto auto, 25% 100%;

  font-size: 6em;
  text-indent: -.20em;
  text-align: center;

  transform: translate(-50%,-50%);
}

.black{
  color: black;
}

解説

1, 円を作る
2, linear-gradientで 上半分にだけ色をつける

.umbrella{
  background-image: 
    linear-gradient(to bottom,currentColor 50%,transparent 50%),
}

3, radial-gradientで 傘の縁をつくる

.umbrella{
  background-image: 
    linear-gradient(to bottom,currentColor 50%,transparent 50%),
    radial-gradient(circle at center center, currentColor 25%,transparent 25%);
}

4, gradientを 横方向に繰り返し表示

.umbrella{
  background-repeat: repeat-x; 
}

5, gradient の 表示位置を指定

.umbrella{
  background-position: center center;
}

6, gradient の サイズを指定

.umbrella{
  background-size: auto auto, 25% 100%;
}

,で区切ることで 複数のimageごとに値を指定できる

7, 傘の柄(ハンドル)をつくる

アルファベット大文字のJです

.umbrella{
  font-size: 6em;
  text-indent: -.20em;
  text-align: center;
}

text-indent , text-alignで中央に配置します
フォントの種類によってはズレるので注意しましょう。

font-family: fantasy;の場合

透明にしている部分を赤くする

対応ブラウザ

Google Chrome , Safari , Firefox

※いずれも最新版で検証