CSS clip-path로 사다리꼴 링크 선택 영역 만들기
안녕하세요 찐망고입니다. 오늘은 CSS에 clip-path를 이용하여 사다리꼴 이미지 형태의 선택영역을 만들어볼 건데요.이전에는 상상도 할 수 없던 디자인들이 요새는 쏟아져 나오네요. 😀 a와 b섹션이 나뉘어 있고, 각각 클릭하면 새창으로 넘어갑니다.선택영역을 사다리꼴모양과 일치하게 만들어야 하는 거죠그 이전엔 불가했던 작업이지만,아! 이미지 맵을 쓰면 되었으려나.. 하지만 이미지 맵은 반응형으로 만들 수 없어요 바로 작업해 볼까요 각 단락에 해당하는 링크를 걸어주고 * { margin: 0; padding: 0;} body { background-color: #f0f0f0;}.container { width: 100%; height: 100dvh; positi..
WEB/CSS
2024. 5. 20. 11:53
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 스마트폰해상도
- 웹표준
- UI디자인
- css
- 웹디자인
- Slick
- uxdesign
- JavaScriptTips
- padding
- 피그마플러그인
- 자바스크립트숫자카운트
- 디자인팁
- css4
- uidesign
- uiux
- CSS3
- 시멘틱마크업
- 크로스브라우징
- JavaScript
- 프로그래밍기초
- 포토샵합성
- boxmodel
- 반응형웹
- slickAPI
- 코딩교육
- margin
- 슬라이드플러그인
- 웹접근성
- Border
- css그리드
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함