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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <style> #wrap { margin: 200px 0 0 50px; width: 200px; } #box { background: pink; position: relative; height: 40px; } #box:before { border-right:28px solid transparent; /* 사각박스의 border 오른쪽 테두리만 투명으로 만들어 삼각형으로 만든다. */ border-bottom:28px solid hotpink; border-right:28px solid transparent; border-bottom:28px solid hotpink; transform:rotate(225deg); /* 삼각형 회전 */ -ms-transform:rotate(225deg); -webkit-transform:rotate(225deg); -moz-transform:rotate(225deg); -o-transform:rotate(225deg); width: 0px; height:0px; content: ""; position: absolute; right: -14px; top: 6px; } </style> </head> <body> <div id="wrap"> <div id="box"></div> </div> </body> </html> |
결과
반응형
'CSS' 카테고리의 다른 글
| [CSS] block 요소의 width값을 미리 알 수 없을 때 가운데 정렬 (0) | 2016.06.30 |
|---|---|
| [CSS] 스크롤바 왼쪽에 위치하게 (0) | 2016.06.28 |
| [CSS] 아이콘, 텍스트 수직 수평 정렬 (1) | 2016.06.09 |
| [CSS] 체크박스 focus borer 처리 (0) | 2016.06.02 |
| [CSS] box-sizing: border-box (0) | 2016.02.03 |
