css

CSS3 border-radius 이용해서 도형 그리기

핑계/ editor

  • 1 comments
  • 7,001 views
  • 2017년 9월 1일

border-radius 속성은 단순히 테두리 모서리를 부드럽게 처리하기 위한 속성일 뿐만 아니라
값을 조절하면 여러가지 다양한 도형을 그릴 수가 있습니다.
CSS3의 border-radius 속성을 이용해서 여러가지 도형 그리는 방법을 알아보겠습니다.

· 원 그리기

 

– 테두리를 그릴 때 width값과 height값을 같게 하고 border-radius값을 width나 height값의 1/2로 지정하면
    원을 그릴 수 있습니다.

간편하게 border-radius값을 50%라고 써도 됩니다. 그러면 일일히 width나 height값의 1/2값을 구할 필요가 없습니다.

.circle1 {                                
  width: 200px;                              
  height: 200px;                            
  background: #15c;                           
  border-radius: 100px;                     
}    

.circle2 {
  width: 180px;
  height: 180px;
  border: 10px solid hotpink;
  border-radius: 50%;
}

HTML5AROUND on html5around.com

 

· 반원 그리기

 

왼쪽이 볼록한 반원을 그리려면 width값을 height값의 1/2로 지정한 후
    왼쪽 윗부분은 그리고, 오른쪽 윗부분은 그리지 않습니다.
    마찬가지로 왼쪽 아래부분은 그리고, 오른쪽 아랫부분은 그리지 않으면 됩니다.

– 테두리 지정 순서는 시계방향으로
    왼쪽 위(left top), 오른쪽 위(right top), 오른쪽 아래(right bottom), 왼쪽 아래(left bottom) 순
입니다.

border-radius: 000px  000px  000px  000px;
                왼쪽  오른쪽  오른쪽  왼쪽
                 위    위     아래   아래
.half1 {                                  
  width: 100px;                              
  height: 200px;                            
  background: #15c;                           
  border-radius: 100px 0 0 100px;           
}             // 왼쪽위     왼쪽아래                         
        
.half2 {
  width: 180px;
  height: 80px;
  border: 10px solid hotpink;
  border-radius: 100px 100px 0 0;
}             // 왼쪽위 오른쪽위

HTML5AROUND on html5around.com

 

· 1/4원 그리기

 

– width값과 height값을 같게 하고 4개의 테두리중 1/4원을 표현하고 싶은 부분의 테두리에 값을 써주면됩니다.

border-radius: 000px  000px  000px  000px;
                왼쪽  오른쪽  오른쪽  왼쪽
                 위    위     아래   아래
.quarter1 {                               
  width: 200px;                              
  height: 200px;                            
  background: #15c;                           
  border-radius: 200px 0 0 0;               
}             // 왼쪽위                                           

.quarter2 {
  width: 180px;
  height: 180px;
  border: 10px solid hotpink;
  border-radius: 0 0 200px 0;
}               // 오른쪽아래

HTML5AROUND on html5around.com

 

· 콘(cone) 그리기

 

– cone을 그리는 방법은 먼저 삼각형을 그린 다음에 border-radius속성을 적용하면 됩니다.
    삼각형 그리는 방법은 여기에서~

.cone1 {
  width:0;
  height:0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 200px solid #15c;
  border-radius: 50%;
}

.cone2 {
  width:0;
  height:0;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-bottom: 200px solid hotpink;
  border-radius: 50%;
}

HTML5AROUND on html5around.com

 

· 초승달(new moon) 그리기

 

– width값과 height값을 같게 하고 background-color값을 쓰지 않은채 box-shadow를 blur값 없이 쓴 후
    border-radius 값을 입력하면 됩니다.

.moon {                                 
  width: 180px;                            
  height: 180px;                           
  box-shadow: 25px 25px 0 hotpink;            
  border-radius: 50%;                      
}

HTML5AROUND on html5around.com

 

· 팩맨(pacman) 그리기

 

– pacman을 그리는 방법은 삼각형 그리는 중간에 border 한 모서리의 color값만 transparent로 바꿔준 뒤에
    border-radius속성을 적용하면 됩니다. 삼각형 그리는 방법은 여기에서~

.pacman {
  width: 0px;
  height: 0px;
  border-right: 105px solid transparent;
  border-top: 105px solid yellow;
  border-left: 105px solid yellow;
  border-bottom: 105px solid yellow;
  border-radius: 50%;
}

HTML5AROUND on html5around.com

핑계

댓글 먹고 살아요~

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
s1221z Recent comment authors
newest oldest most voted
s1221z
Member

이해완료!! 다른 도형 그리는것도 해주세요