[CSS] border 속성을 이용한 삼각형 만들기
웹서핑 중 CSS border 속성을 이용해 삼각형을 만든 홈페이지를 찾아서 따라해 보았다.
(참고 사이트: http://worldskills.org)
CSS의 width, height 속성을 0으로 설정한 뒤 border 값을 주면 두개의 삼각형이 모여 사각형 모양이 되는데, border-right에 transparent 값을 0으로 주어 삼각형 모양만 남게 되는 것이다.
또한
(참고 사이트: http://worldskills.org)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="position:absolute;top:0;border-top:380px solid #df4661;border-right:100px solid rgba(0, 23, 255, 0);width:0;height:0;pointer-events:none;"> </div>
텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용 텍스트 내용
</body>
</html>CSS의 width, height 속성을 0으로 설정한 뒤 border 값을 주면 두개의 삼각형이 모여 사각형 모양이 되는데, border-right에 transparent 값을 0으로 주어 삼각형 모양만 남게 되는 것이다.
또한
pointer-events:none 속성을 줘서 border-right에 해당하는 뒷 배경도 선택이 가능하게끔 할 수 있다.
댓글
댓글 쓰기