CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)-CSS 튜토리얼-php.cn

CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)

青灯夜游

풀어 주다： 2018-09-12 16:08:04

원래의

10668명이 탐색했습니다.

프런트 엔드 개발을 할 때 페이지 효과를 풍부하게 하기 위해 드롭다운 목록의 역삼각형 그래픽과 같은 작은 그래픽이 필요할 때가 있습니다. 그렇다면 이러한 삼각형은 어떻게 만들어지는 걸까요? 이번 장에서는 CSS나 HTML을 사용하여 삼각형을 그리는 방법을 소개하겠습니다. 삼각형을 만드는 두 가지 다른 방법(코드 예제) 순수 CSS 코드를 사용하여 삼각형을 그리는 방법이나 HTML5를 사용하여 삼각형을 그리는 방법을 모두에게 알려주세요. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. CSSborder 속성을 사용하면 삼각형 그리기를 구현할 수 있습니다.

Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border 属性--绘制三角形</title>
		<style>
			.demo{
				height:0;
			    width:0;
			    overflow: hidden;
			    font-size: 0;
			    line-height: 0;
			    border-color:#FF9600 transparent transparent transparent;
			    border-style:solid dashed dashed dashed;
			    border-width:20px;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)

Css의 border 속성을 사용하여 삼각형을 구현하는 원리: CSS 박스 모델

상자 모델에는 여백+테두리+패딩+내용이 포함되며 위쪽, 아래쪽, 왼쪽 및 오른쪽 테두리의 교차점에 부드러운 대각선이 나타납니다. 이 기능을 사용하면 작은 삼각형, 작은 사다리꼴 등을 얻을 수 있습니다. . 상단, 하단, 왼쪽 및 오른쪽 테두리의 너비 또는 색상을 다르게 설정하여 삼각형의 모양을 조정하세요.

.demo {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

로그인 후 복사

Rendering:

CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)

높이와 너비를 모두 0으로 설정하면 :

CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)

다른 색상을 모두 제거하고 주황색만 남기면 삼각형이 됩니다.

CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)

2 html5의

캔버스 캔버스를 사용하면 삼각형 그리기를 구현할 수 있습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas-绘制三角形</title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">
    浏览器不支持canvas
</canvas>
<script>
        window.onload=function () {

            var canvas=document.getElementById("canvas");//获取canvas对象

            var ctx=canvas.getContext("2d"); //创建二维的绘图上下文对象

            ctx.beginPath();
            ctx.linewidth=20;
            ctx.lineJoin="round"; //两条线交汇时的边角类型（miter 尖角默认  bevel斜角 round 圆角 ）
            ctx.moveTo(10,10);
            ctx.lineTo(110,10);
            ctx.lineTo(60,50);
            ctx.closePath(); //closePath() 关闭路径  闭合
            ctx.strokeStyle="blue";// strokeStyle 只能填充该路径的颜色
            ctx.fillStyle="red";// fillStyle 填充字体颜色、填充路径区域、图形区域
            ctx.fill();// fill() 填充字体
            ctx.stroke();
        }
    </script>
	</body>
</html>

로그인 후 복사

렌더링:

CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)