前端HTML、CSS、JS绘制三角形的方法
转载自 http://www.daqianduan.com/4721.html
<html>
<head>
<meta charset="UTF-8">
<title>创建三角形（小三角）的几种方法title>
head>
<body>
<h1 class="demo-title">创建三角形（小三角）的几种方法h1>
<div class="demo-container demo">
<style>
body {
font: normal small Arial, Helvetica;
text-align: center;
}
.border-triangle {
border-color: #57af1a #fff #fff #fff;
border-style: solid;
border-width: 100px 60px 0 60px;
height: 0;
width: 0;
display: inline-block;
/* demo */
}
.entity-triangle {
font-size: 12em;
line-height: .7;
color: #f7931d;
text-shadow: 0 7px 7px rgba(0, 0, 0, .5);
}
.rotated-triangle {
width: 100px;
height: 100px;
margin: 0 auto;
/* demo */
position: relative;
overflow: hidden;
}
.rotated-triangle:after {
content: "";
position: absolute;
top: -35px;
left: 15px;
width: 65px;
height: 65px;
border: 2px solid #ce0f3d;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #f21972;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f21972), to(#e80f43));
background-image: -webkit-linear-gradient(top, #f21972, #e80f43);
background-image: -moz-linear-gradient(top, #f21972, #e80f43);
background-image: -o-linear-gradient(top, #f21972, #e80f43);
background-image: linear-gradient(to bottom, #f21972, #e80f43);
-webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255, .7) inset, -1px 0 0 rgba(255, 255, 255, .7) inset;
box-shadow: 0 -1px 0 rgba(255, 255, 255, .7) inset, -1px 0 0 rgba(255, 255, 255, .7) inset;
}
.svg-triangle {
margin: 0 auto;
width: 100px;
height: 100px;
}
.svg-triangle polygon {
fill: #98d02e;
stroke: #65b81d;
stroke-width: 2;
}
/* --------------- */
#about {
color: #444;
}
#about a {
color: #777;
}
style>
<h3>1、Base64 imageh3>
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAABnCAYAAAA38a1WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxQjQwNDFBMEYzRjlFMTExQjQ3NTgwQzA2NTZGMkY2QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQ0ZDMUE5NkY5RjMxMUUxQTE2MkY1REQxQUVBQjI3QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQ0ZDMUE5NUY5RjMxMUUxQTE2MkY1REQxQUVBQjI3QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxQjQwNDFBMEYzRjlFMTExQjQ3NTgwQzA2NTZGMkY2QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxQjQwNDFBMEYzRjlFMTExQjQ3NTgwQzA2NTZGMkY2QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlK0s84AABHzSURBVHja7F15kBTVGX99zLm77MKySGlSmioTTUzyhzHRVJEY80dSFayKZfQPrUpVtCpVsVIp4xVAQTQkaoVSowajgIBYAZFzOVQgAsqC3AgERQFPYDn2np2Znunj5b2ePl6/6Wt2enZ7h27q1TL9zdGvv/597/t979evme88swtQWzNq96A2GbVJINrCsJ1ArQO1f6O2hzR8eP8NgLdx4CHULo/OW6i2K7X2O9Supx3JUm++J3Jg6LcX6B08AUsGhVYjfE6+uhVc3pK0/Ra5KAMuzjn+SmQP1t4vSGDpofNAgRC//FGx61QiPv5rBYsTsQPVV1DZARgWj4Vgy8lecEVLCjBM+Y9IeRHwqZjjQUT2YO2dmYLuQLztOfHEbUX0F4NO3ckaDkQ7xb7zL6G/Z/GLvKiAnjx+Lyxv6kehc4vsgdlzogx685LhUCgW7sW+IsFnGROPz7oloxTy9+mve9CHZQXaXCvQI2xH9qDsF7KiuVcWZ3805cZ9mhMZOrFhtP8zx6bdtAaF1WN4pyhD0JWTAEaypQFQvi+yB27vRec+i8bHkgdhVjh9fL7uJ7fsFL/mij2d0w005kQgSDIFd+gRDiJ7tXYZKghAJgqlTPf9n/3z7jNeTtTRyJ34+2+2QUncrwP7QlaKkDLM9m50zkVtKENh9Pgnj928GvuGcKKRy/CEA3Un4hYbOLRlRvMPfvkmNg4iSPcOFEETb14AEnGV2GZYkX3I9gJyXo8gG69znx15QmMSstYsYyLpPOxlnNcmUMMEMfWN+xbelfr6tx/Bb0xwDOKNCcAypQPg0zHXA4zsQ7ef6S+CAcQO8KYUcoePTfv57diXmDRgH+N0hXBo2ZhoCbWfPXvXSpTSdqpXB0pycLYahbva2gcLiuFANSfpWPEUjTw6lWW9ct6Bw1v/pf+/F0FcUpQo8aiRHf/rIjhh/ov/zTu/4cXjNj6C5GuWMiha0/8PT//nsQ45n/lULQehWN2dlyMk1cjei86tIJVQiBLL3s6Vs9cSDlNo5zk5UX+zTPyVe3eunqu/qQ+hUZAjJAVtxxGOTGb6D256WTj18QAx9ikUyAxnckSsZYm/eqKDMyI+e3xvb8NV1zfFWi65Wh2Y0UfGJJwLuAq6mlg+sldi784rIK+hUM4NfP7587+fQyQzAmpFIqFRLOFUL6ISBt3zovZB3Ard77y6HiqyoMZqhMT+ghwhKSA7dl5fwURh746V87UsVHecqGLHAYm8TTiVtQ/oTsRfJmSOdnw5cGDjvObrfvUnNWsSFJCUZcf0VvTgSZHdtPfKZuKZ+/zImvNvvbyfQGCBcKIFhRiAxsy+9oLR3sAQjtSdiElN/PSSv25svOYnt3KppssklOQMMiwYl2QjnleFPVOEIEugEEc8woFkGLU4kYigZUAiExsdjQXiC/N9e9YvMJIcxGmKKLRCSDdgsy+y03ac7fcWTE6YObJtHo54BKnXhzPdge7ZKeFZ2pH6F6mOPNf+3E5psPekOojitLgAbVJo6JFiR3b8tw+hsChDvTJz4auFU9sJwBRsHKhQvipHomZ0Q6MK855tS14yrp6iAnKSEiUuFdpxcbufQGHf3g2vaOdXR6HjWOjGE+1mJu2SnHzXltcOD368e4kxMBdKqIzIvH87jmD6fDuObGdXPf0ehULHZMbTiRQaFYpuGIg8t/b5tUpR6NfrqgPFCGl+7SixB4Oi6QststHJTNEPCv0g0THJKXSe7O7f//Z8o8JQxFWHKHHxYx9kTKKf/WTvMhTZjrg4ENrkLfaSRRqNGuWAFBr16Sr8Y/HO5U9tGfP9m27jGpovx+Nzfx6CJiBFPNDFnoUsyENOExfKwrn1c9ZSnJCuzJRRCl9OdKmnigRvVB3Zs2Pl/LZf3D1LTXIUBjSkeMAKEQ+0s+MxcFBgtXALAC6eCKeOnbcZC2U/YdQznLpQDktYvfD23H1oYP5Ef2O/yETh1MGOz42kZTNyPnMaF0+ojLRIldigWxj1Mya6UQ5LktO1acGLRtlIwlVbJuKB1D4sWssQEVYrmpBhtGCTyHii0NOJDmFVopwo9HQs/3Dg8DYjyckyMbUjUXZqtgGZNTyCIxcumvjhhF4o9OVEapZDsamrqlfTqUVT23HVQR3U0ScyEhuFU62p0cmcsAda5BIqqY8GgUTgEVbVuK5VHUqDtsQAUWEu+nCqJjOKSSkyRzsWocj1kcssBQQVbr6c6FFXNcbGs6ue3q7XVXEHcgp70YfTrMwAfZICF0fOvD6r3caBFVGKSilGJWhUHYmrDxNu/uNs9apDaORRD2JQLudR2aI7z6oDu4ISvMFY2pRcIEohZ/szQ63MVO1EogBgV1c15hxx9aHxuz9dk77ie7eoKoB4EiRZa4cvllvTskoMyNr1i5z3RecbT251maWoKJkZ6phoV1e1RWP3O4vX6VIOrP3JyaxHIlB/rYDygSwxY9+7c9U8h8neiilFVU70kHIYlCNzdLsq5TBLTTxQyI9dBGNiDvK05GIfQeyL1VCKqp1oI6yS7ByJqxG4KqGGFzXJ4S8aiiGwMSAojFEfpSQXhWopRVBIBC5hVTAoByHlyKI0W4Rs3VMMTCkKsYRJKQ5vXahJLoRKJBc1d6IPylEwpByZnuP6GwUmVvfhNI/yOxEyhuTi1OLpG2xQ6Cm5GBYketRVDSlH1+aFc4yxASU4BVi/SY6EnJclxkJCciFUKrmoCcXwEVrpJCeu8saO5R81XjNpSeNV19+pOhIkQAMUEI/ymI8bhXYh1Qg0EFYtuRg2J+riVUqvKmrfK+jcEUs50ve+MpmNJ5txqCnEkiDNS3XFE4uoywLD20ku8l68sNqNDRCJjjJHWsqBnWihHHUwJhY4M5nBIjJNcpF3yEY9JRfD6sS/vXnEV10VSzlw1UKHrcAm64fYo5GjqFEKXB/FkYeaZrKVXBDnbmSdCN2lHNa6aulGEXXLowRABNyolyQqaHjIsyYKBw5uWoAjjx/JBQwoDLJBBNJZG474kXLksZQj/+WH641xhEuNfhRySaCJuFXJxZllT/zXj+RCPWcwLE7UADhrw2EvylFC43uvG07EdKOoc8dROCbKDIs6FaMlF4I/yQUMDIvVh1MizDjUVYvk5HH/gU2f4htHDDTyKU09PvpQWOTTTpILp7lC9e0zVx2A1DkbWZ4oF02qgA/u8Vuv9bpFLoFvHLn6yS23sIl0GybIAowDPj9o5WEh15XmRQ4UYxwtufCsj+JzRJ+3EXciG+P8Th7rTsQdjeFqxrhJt09VT1g8jYtVgNUmj0PPEwUJKA1NRjTEIjEsFnOYK7Temo3OlyzKgItxgTkxsDFRb4+v+8CXXhVXMwwpB35DvGHUjIlyIq2W2Iz66CLjlrS8Q2VGdWTp3NDfHxKKQbdKpBxGkoOCgsTwoZ9qwpILKdloVx91ujHUQin0/wTnwoATG73NWLEPOtRVLXpVXNXInTy4whhf402hn2qS4o1Av6sQFy+wOIzKRm0dOHPtB9Du+0PCE8t7io9tZvtBX1KOCxvnG1KOIjockQtvJUdGkaLAxO0kF/QyJVIZpaDOT5BeDHxMtMb8srAq02Nj9sT+M6SUQ040aIlt+MZEOdnkJLkQ3CQXM9sPQOfvD+uYqB3yo+0H6CTHVnRMSjlklDDAxubQjYkSn1TLhC6SiwKwWW8GnwOn8xPUmFg9TyzIfvbbVXPIW+RUKUfrjXfMUFN4lP0puQxgJDEcPJFhAWwwUYgjh43kQrSTXPg8PyOLRC7OljV8/Pr/H12z34tyqIjUVuUwbpFjW1oRV+NtG4aKk60WdralBR00Y9RHiVvSXCUXuO9e5yck2al3OJqxep+fuqpA3iInoiRC5uIjHk4VhgMiT6i49721CFj1o44z9n6+P8Q8ETpxRycph6BLOchVOWCqBXWUGVmKkWom66Mnz65+ZgfwIcOfji5c6OP8hGlm33ObbkUjOedocSS5KoeEDk9JNIxYdqrwCSCycS/JRRkKH162G4Jh3GrDE50ucb9SDoJyKAlErpmRUMihH08305KLw34kF9AV5tT5CXPZzW7/I6v2+pNyvPHkVlPKgRIKNawO78w9vngkjVIQkgsBeKxyoffRDevBzibWKpx6X2GeUg6tGlIaixBHg3x8+MIpRj5B7LHIS5Nc5IGfVS68+g+DjbYB8ESpov1Tl74Pn7rjx4zHdFUMV0PS37zOuEUOo1E8e8rkcTXUlXLj2koRQKuPYpEXVZmxlVzgvun9dup/+flhRh6JeH6MbtBhv96moM76oRzkascyFwNs8xjAId6Gczv816lVZW9MoYyUmKXYvXaRQ2WmTHLht/+kfRTUTt3CmbeUA1dFBo9uf8042MaxWlm1duGUbRpnlVysn7PLDyd8eMVuOLTfD3ntFLrYp63Ybbf2eNl0FZZy6KtyqItVY95WK7IfTwOJoBR+JRe4L5X2P1yJTTXPePRRjgPUqhwwOQaN5HzwZB9BnG0cZ9ZH/UkuoN05qOgZmKENpz7btOW7hiTliI2bEHg4ZRqagb4sfQWSC60PsIrzENKZ/Up4mg/eWCblUBIo+YilguOJeOnKZPPQJBfB9H+0JjalNvWN96FLXbVISjkGj+1aanCjMa2BIZGzJjMnNcmF591MpWOv9vdHz3yiq/2h1zrg7N9O0pMcxqEAED+37oX2hiuvvZnh401YKqFwDUAe6KuKJzLJFGBUpZ2GwvfXLPSTzHj10X//+ZF3ImvzuCEFHSDr9hgiZ7uTlEO9z1Gtqx7cvKDlh5PxE67R2NgGGCWHPqFYvqSS9Uhj4ycC/XTaSC4cl+yaYo0gQfU/RAVw4D4o2NmnLNvpS8pxZumszbqUA1dVOJRRDpViMKkmILMlZ5YkF4vXuaDQqI8+iCJHpf0LuVDKCVBDtjtJOYy6KrkqB0CUg+ETlf8+y6KxcLxJKVTJxfYvgfPKh9TNMDXrfzjIPvRKuh3sfylHoy8pR6ylrWIk8k2tZn3UlFzYcUKJOB71GIfaPzt7XSJRc2RFUg6ZS6AEpcn37zOxmIpgI5mxrgIsOIXR4JAWNiTaXOlO+yux21AO6y0A1GrH8ebx2lXujcRk20STUmR6jmu3pHkunPfQ6ztgUP0LlcamFtsDi9+zk3KQYZVY7TjfraIREXauYaznlc4kGgBMmpSi592lc4nKjKMIGDsQhHQL4P5EuaL9fu0ulRyecGS8/+CmhWNv+PWD6jwgIu2Fnm71Q7a6UoYBjRMmGPdS2EguHCkFfbzV9s+0cyOPRC7GljUcz+z2V2J/aGmHr6XHSCkHLmKnJ17qqCtNtrUBhStdt9QqF3ootV0FGB9L0P0z/h/aqSjgX2PiZnegHGXrAJBSDphoBGwyXa7RYnmE1FbjSwnJheti6qCG/Qu5xiYY+4PlaJSobFUtAOAqC6626B9PX3Jp2alLtExQkaqGsnLJhZ3wCVLHENbkNJRk32LXTqKP1Y5NKYcSSwCusYWgFAlEKUzJhbaejpcD4XD0ry6movzYqQhkJ+UwHlxtUI4xbVhsoX4+OW6iRXKB19MBPh68/MCSDljr/oV3KirQUQOik7ndj5RDvUVOKeTOqm9kWMQdWwGXbgIKnzSOtmvzgjl+ZilKvwmHoX91yhMroBz0o3JzKGEx6qq4OJ4Ye4nx4cyRd+f2bFclF/S6axKocjH1kdyqdqKC+A7dnPZXY79v0TavB1er3LFzxT+2ydk+Y7VjRXvgJEboVwunrMKOdqnMqBQS/1bQx+9kDwXZ39iTHLYrjlpfVXciqzmE15gz271t6bOtP7vzz1xD87dKDsx39u3Z8JzmQM+xcDj7FAonjnBopcMqdijT9c6rh1D7A8pQk6nLrhoz+PHu8wQlCfTBInURTod7c3lwNSlzxGuMZeTBvl7kQFzNyWqNFD8FvhZ3hMTqkxxWaxBYn4FMa3YqfvByhMTaoREA++cdG5mq1rI2Y2HZkl2j1YGjHYl0AYAhuKSsJznUPplA7qgPo6MaiTZoJJMcO/ExSerFekhm6sKJHkmOSDnNripTFyish3BKJzkMMNcUA8B6B6dt/Wu0o3DUI9EhyVEItMlUU+rNgXXhRBtn0CFWoZxXVw6sp3Ba5hTi0bmg3pxGb/8XYADcXqq0m1KMewAAAABJRU5ErkJggg==">
<br><br>
<h3>2、Borderh3>
<span class="border-triangle">span>
<br><br>
<h3>3、Entityh3>
<span class="entity-triangle">▼span>
<br><br>
<h3>4、Rotatedh3>
<div class="rotated-triangle">div>
<h3>5、Canvash3>
<canvas id="triangle" height="100" width="100">Trianglecanvas>
<script>
var canvas = document.getElementById('triangle');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(50, 100);
context.closePath();
context.fillStyle = "rgb(78, 193, 243)";
context.fill();
script>
<br><br>
<h3>6、SVGh3>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
<polygon points="0,0 100,0 50,100">polygon>
svg>
div>
body>
html>