CSS로 팔각형 표시

2795 단어 CSS
아니오CSS Shapes면 탓하지 마세요.

CSS


구조가 상당히 간단하다.
시뮬레이션 요소를 각으로 작용시키다.
.octagon {
  position: relative;
}
.octagon:before, .octagon:after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border: 20px solid transparent;
}
.octagon:before {
  bottom: 100%;
  border-bottom-color: inherit;
}
.octagon:after {
  top: 100%;
  border-top-color: inherit;
}

.octagon-color {
  background-color: #DDAAAA;
  border-color: #DDAAAA;
}
주요 사항 및 고려 사항
  • :before배치:after와 position위원소
    • 로
  • 위원소border를 통해 사다리꼴
    • 형성
  • position상자의 바깥쪽에 배치하기 때문에 실제 배치할 때 전후 요소의 공백 취법 등에 주의
  • box-shadow 등에 그늘을 드리우면 고통스럽다.

    • Codepen

    응용 프로그램 클래스의 성명과 주 함수 봉인
    font-smothing에서 OSX 글꼴 렌더링 방법 조정

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage