zoukankan      html  css  js  c++  java
  • 2.Triangle (三角形)

    1.等腰直角三角形:

      https://www.cnblogs.com/FlyingLiao/p/9869040.html

    2.1任意三角形:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .yuanXing{
            width:60px;
            border-top:30px solid black;
            border-bottom:30px solid red;
            border-left:30px solid blue;
            border-right:30px solid pink;
        }
        .dengYao2{
            /* 在此以红色三角形为主 */
            width:0px;
            /* border-top:60px solid white; */
            /* 改变三角形的高 */
            border-bottom:60px solid red;
            /* 改变三角形左边底 */
            border-left:50px solid white;
            /* 改变三角形右边底 */
            border-right:30px solid white;
        }
    </style>
    </head>
    <body>
    <div class="yuanXing"></div>
    <br/>
    <div class="dengYao2"></div>
    </body>
    </html>

     2.2任意三角形(SVG目前最好的

      原地址:http://www.runoob.com/svg/svg-polygon.html

    <!-- svg有默认宽高 ,所以polygon的宽高不能超出父元素宽高 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <polygon points="200,10 250,190 160,210"
      style="fill:lime;stroke:purple;stroke-1"/>
    </svg>
    • points 属性定义多边形每个角的 x 和 y 坐标

    2.3任意三角形(包括多边形 利用canvas也不错。

        地址效果:https://codepen.io/flyingliao/pen/JzJgmP?editors=1010

        HTML code:

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    <!-- 如果浏览器不支持会显示以下内容-->
    Your browser does not support the canvas element.
    </canvas>

        JavaScript  code:

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    /* 起点 */
    cxt.moveTo(30,10);
    /* 绘制三角形顺时针方向 */
    cxt.lineTo(60,40);
    cxt.lineTo(0,40);
    cxt.lineTo(30,10);
    /* 绘制 */
    cxt.stroke();
  • 相关阅读:
    希腊字母写法
    The ASP.NET MVC request processing line
    lambda aggregation
    UVA 10763 Foreign Exchange
    UVA 10624 Super Number
    UVA 10041 Vito's Family
    UVA 10340 All in All
    UVA 10026 Shoemaker's Problem
    HDU 3683 Gomoku
    UVA 11210 Chinese Mahjong
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/9901898.html
Copyright © 2011-2022 走看看