前端HTML、CSS、JS绘制三角形的方法

最新推荐文章于 2024-09-20 10:57:24 发布
Half0pen
最新推荐文章于 2024-09-20 10:57:24 发布
阅读量1.3w
点赞数 1
分类专栏： front end 文章标签： html 前端
front end 专栏收录该内容
20 篇文章 0 订阅
订阅专栏
转载自 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 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="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>