CSS 초승달 모양 만들기

CSS 초승달 모양 만들기 를 통해서 background-color의 속성 transparent 이용 방법과 border-radius, box-shadow의 사용 방법을 알아보자.

<style>
  .center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: yellow;
    border-radius: 0px;
    box-shadow: 25px 10px 10px 10px blue;
  }

</style>
<div class="center"></div>

위의 코드대로 사용하면 아래와 같은 이미지가 만들어진다.

CSS로 초승달 모양을 만들어보자. 초승달 이미지는 위의 그림에서 그림자로 비치는 파란색 모양을 초승달 모양으로 만들 것이다.

먼저 노란박스의 background-color: transparent; 로 지정하여 투명하게 만들어서 색을 없앤다.
border-radius: 50%;로 지정하면 네모 박스를 동그란 모양으로 만들 수 있다.
box-shadow: 25px 10px 0 0 yellow; 로 지정하면 노란색 초승달이 만들어진다.

box-shadow: x-offset y-offset blur spread;

box-shadow는 그림자를 만드는데 x축에서 얼마만큼 떨어지게 만들지, y축에서 얼마만큼 떨어지게 만들지, 흐린 모양의 강도는 얼만큼 할지, 얼마나 넓게 퍼져 보이게 만들 것인지를 지정하는 것이다.

<style>
  .center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 25px 10px 0 0 yellow;
  }

</style>
<div class="center"></div>

오늘은 CSS 초승달 모양 만들기 에 대해서 알아봤습니다. 즐거운 하루 되세요.

답글 남기기 응답 취소