소개

HTML과 CSS의 기초를 배웠기 때문에, 겨우 메이지 맛있는 우유의 패키지를 모사해 보았습니다.


출처 : 메이지 맛있는 우유 맛있는 생활 ~ Natural Taste ~ | 주식회사 메이지

맛있는 우유, 약어 맛있는 소입니다 [요출전].



그런데, 이 원호상의 구분선을 만드는 것이 어려웠기 때문에, 만드는 방법을 정리해 두려고 생각합니다.

만드는 방법

1.

먼저 부품을 준비합니다.

코드 보기

index.html

<div class="upper-box"></div>
<div class="lower-box">
  <div class="lower-box-item"></div>
</div>

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;
}

상단으로 확대하면 이렇게 됩니다.

2.

그런 다음 점선에서 튀어나온 부분을 자릅니다( overflow: hidden ).

CSS의 overflow 속성은 요소의 내용이 너무 많아 블록 정형 컨텍스트에 맞지 않는 경우에 어떻게 할지 설정합니다.
출처 : overflow 속성 - MDN - Mozilla

코드 보기

index.html

  <!-- 手順１とおなじ -->

style.css

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

3.

점선으로 둘러싸인 부분을 위로 옮겼습니다 ( margin-top: -50px ).

코드 보기

index.html

  <!-- 手順2とおなじ -->

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 도 추가로 지정해 주세요. 겹친 부분이 파란색으로 채워져 버립니다.

4.

마지막으로, 알기 쉽게 하기 위해서 붙이고 있던 점선을 지워 봅시다.

완성된 코드 보기

index.html

<div class="upper-box"></div>
<div class="lower-box">
  <div class="lower-box-item"></div>
</div>

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;
}

이것으로 완성되었습니다. 했어.

결론

모사 코딩은 시간이 걸리고 힘들지만, 매우 공부가 됩니다.
HTML과 CSS의 기초를 배우고 싶은 분은 적극적으로 취해 봅시다.

또 「여기는 이런 편이 좋다」라고 하는 점이 있으면, 꼭 지적해 주세요.
잘 부탁드립니다◎

참고로 한 사이트

콘텐츠의 구분을 호로 표현하는 CSS – 한가로이 디자인하고 있는 것 같은.

CSS에서만 요소 구분을 곡선 (호)으로 만드는 방법 | TechMemo