순수 CSS 삼각형 그리 기(여러 각도)

2723 단어 css
우리 홈 페이지 는 CSS 로 인해 변화무쌍 한 스타일 을 보 여 준다.간단 해 보 이 는 이 스타일 언어 는 사용 에 있어 서 매우 유연 하 며,창의 성 을 발휘 하기 만 하면 사람들 이 상상 하지 못 했 던 많은 효 과 를 실현 할 수 있다.특히 CSS 3 가 널리 사용 되면 서 더 많은 신기 한 CSS 작품 이 쏟 아 져 나 왔 다.오늘 CSS 삼각형 그리 기 방법

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
을 보 여 드 리 겠 습 니 다.

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

좋은 웹페이지 즐겨찾기