CSSで円弧状の区切り線をつくる

# はじめに

HTMLとCSSの基礎を学びおえたので、ためしに**明治おいしい牛乳**のパッケージを模写してみました。

><img src="https://www.meijioishiigyunyu.com/images/index/lineup-pkg_oishii_900-sp.png" width="250">
>出典: [明治おいしい牛乳 おいしい暮らし～Natural Taste～ | 株式会社 明治](https://www.meijioishiigyunyu.com/)

おいしい牛乳、略して*おい牛*です<sup>[*<a>要出典</a>*]</sup>。

><img width="250" art="明治おいしい牛乳の画像" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445469/62435e3d-d4fc-a633-4a25-43827c74368d.jpeg">

さて、この**円弧状の区切り線**をつくるのがむずかしかったので、つくりかたをまとめておこうと思います。

# つくりかた

## １．
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445469/4d8d2738-9d21-12d0-7b26-385dbfc5272e.png">
まず、パーツを用意します。

<details><summary>**コードをみる**</summary><div>

```html:index.html
<div class="upper-box"></div>
<div class="lower-box">
  <div class="lower-box-item"></div>
</div>
```

```css:style.css
.upper-box {
  width: 300px;
  height: 100px;
  background-color: #07b; /*ブルー*/
}

.lower-box {
  width: 300px;
  height: 50px;
  border: 2px dashed #999; /*これらは*/
  box-sizing: border-box;  /*最後に消します*/
}

.lower-box-item {
  position: relative;
  left: -300px;
  width: 900px;
  height: 900px;
  border: 15px double #07b; /*ブルー*/
  border-radius: 50%;
  box-sizing: border-box;
}
```
</div></details>
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445469/cf584407-7ceb-8269-ed62-7ac8a1ae7613.png">
上部にズームインすると、このようになっています。

## ２．
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445469/5da1949d-8305-032d-4e22-93b7f81d9e98.png">
つぎに、点線からはみ出た部分を切りとりましょう（`overflow: hidden`）。
>CSS の overflow プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。
>出典: [overflowプロパティ - MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/CSS/overflow)

<details><summary>**コードをみる**</summary><div>

```html:index.html
  <!-- 手順１とおなじ -->
```

```css:style.css
.upper-box {
  /* 手順１とおなじ */
}
.lower-box {
  /* 手順１とおなじ */
  overflow: hidden; /* New! */
}
.lower-box-item {
  /* 手順１とおなじ */
}
```

</div></details>

## ３．
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445469/0a5d3acf-925f-c121-c077-ffe6244f1b95.png">
点線で囲まれた部分を上にずらしました（`margin-top: -50px`）。

<details><summary>**コードをみる**</summary><div>

```html:index.html
  <!-- 手順2とおなじ -->
```

```css:style.css
.upper-box {
  /* 手順2とおなじ */
}
.lower-box {
  margin-top: -50px; /* New! */
  /* 手順2とおなじ */
}
.lower-box-item {
  /* 手順2とおなじ */
  background-color: #fff; /* New! */
}
```

**注意** `lower-box-item`に対して、`background-color: #fff`も追加で指定してください。重なった部分がブルーに塗りつぶされてしまいます。

</div></details>

## ４．

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/445469/24bb02a9-3e44-3bea-1c8f-e9209409ad04.png">
最後に、わかりやすくするために付けていた点線を消してあげましょう。

<details><summary>**完成したコードをみる**</summary><div>

```html:index.html
<div class="upper-box"></div>
<div class="lower-box">
  <div class="lower-box-item"></div>
</div>
```

```css:style.css
.upper-box {
  width: 300px;
  height: 100px;
  background-color: #07b;
}

.lower-box {
  margin-top: -50px;
  width: 300px;
  height: 50px;
  overflow: hidden;
}

.lower-box-item {
  position: relative;
  left: -300px;
  width: 900px;
  height: 900px;
  border: 15px double #07b;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #fff;
}
```
</div></details>

これで完成しました。やったね。

# おわりに

模写コーディングは時間がかかって大変ですが、とても勉強になります。
HTMLとCSSの基礎を学びおえた方は積極的に取りくんでみましょう。

また「ここはこうしたほうがいいよ」という点がございましたら、ぜひご指摘ください。
よろしくお願いします◎

# 参考にしたサイト

- [コンテンツの区切りを円弧で表現するCSS – のんびりデザインしているような。](https://timing-web.com/arc-border/)
- [CSSのみで要素の区切りを曲線(円弧)にする方法 | TechMemo](https://techmemo.biz/css/separation-arc/)