728x90
반응형
마름모 이미지를 불러와서 사용하는게 제일 간단하지만 나처럼 굳이 CSS로 만들고싶다!하는 경우
CSS border, ::after 속성 등을 이용해서 마름모 모양을 만들 수 있음
See the Pen pure CSS diamond-shaped text box by nah (@wimmwell) on CodePen.
마름모 크기를 변경하고싶다면, 50px이 들어간 값들을 다른 숫자로 바꾸면 된다.
내가 마름모 이미지를 안불러오고 굳이 CSS로 구현한 이유는
텍스트가 들어간 이미지를 불러오면 반응형으로 크기 변동 시 글씨가 다소 깨져보이고
이미지를 최소한으로 사용하고싶기때문이다.
728x90
반응형
'Front-end' 카테고리의 다른 글
| [HTML/CSS] pure css 원이 퍼지는 마우스오버 애니메이션 효과 (0) | 2022.12.29 |
|---|---|
| [HTML/CSS] 가로로 긴 컨텐츠 스크롤 박스 만들기 (0) | 2022.12.23 |
| [HTML/CSS] background-clip으로 배경이미지 텍스트 만들기 (0) | 2022.11.29 |
| [HTML/CSS] float:left 속성 없이 각 요소를 양측 끝에 정렬하기 - flex (0) | 2022.11.28 |
| [HTML/CSS] 웹접근성 인증 홈페이지 퍼블리싱 하기 (1) | 2022.11.25 |
