CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)
- 青灯夜游원래의
- 2018-09-12 16:08:0410681검색
프런트 엔드 개발을 할 때 페이지 효과를 풍부하게 하기 위해 드롭다운 목록의 역삼각형 그래픽과 같은 작은 그래픽이 필요할 때가 있습니다. 그렇다면 이러한 삼각형은 어떻게 만들어지는 걸까요? 이번 장에서는 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:
 "153673408920672CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)")
.demo {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}Rendering:
 "153673478138812CSS나 html5를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)")
 "153673506972770CSS나 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를 사용하여 삼각형을 그리는 방법은 무엇입니까? 삼각형을 만드는 두 가지 다른 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.