CSS
[CSS] 삼각형 만들기
힘없는염소
2016. 6. 22. 13:08
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> |
결과
반응형