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

집

웹 프론트엔드

CSS 튜토리얼

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

青灯夜游

Sep 12, 2018 pm 04:08 PM

테두리 속성

프런트 엔드 개발을 할 때 페이지 효과를 풍부하게 하기 위해 드롭다운 목록의 역삼각형 그래픽과 같은 작은 그래픽이 필요할 때가 있습니다. 그렇다면 이러한 삼각형은 어떻게 만들어지는 걸까요? 이번 장에서는 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를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)

html5의 캔버스 캔버스를 사용하면 삼각형 그리기의 핵심 사항을 실현할 수 있습니다.

삼각형은 캔버스의 세 좌표에 있습니다: moveTo(10,10)----왼쪽 위 모서리 좌표, ctx.lineTo (110,10)-------우측상단 좌표, ctx.lineTo(60,50)----아래 좌표

위 내용은 CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.