转载自 /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 image</h3><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAABnCAYAAAA38a1WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxQjQwNDFBMEYzRjlFMTExQjQ3NTgwQzA2NTZGMkY2QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQ0ZDMUE5NkY5RjMxMUUxQTE2MkY1REQxQUVBQjI3QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQ0ZDMUE5NUY5RjMxMUUxQTE2MkY1REQxQUVBQjI3QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxQjQwNDFBMEYzRjlFMTExQjQ3NTgwQzA2NTZGMkY2QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxQjQwNDFBMEYzRjlFMTExQjQ3NTgwQzA2NTZGMkY2QSIvPiA8L3JkZjpEZXNjcmlwdGlv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"><br><br><h3>2、Border</h3><span class="border-triangle"></span><br><br><h3>3、Entity</h3><span class="entity-triangle">▼</span><br><br><h3>4、Rotated</h3><div class="rotated-triangle"></div><h3>5、Canvas</h3><canvas id="triangle" height="100" width="100">Triangle</canvas><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、SVG</h3><svg xmlns="/2000/svg" version="1.1" class="svg-triangle"><polygon points="0,0 100,0 50,100"></polygon></svg></div></body></html>
