轻松画任意三角形，你需要一个小工具。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{background: #000;}
.main{width:600px;height:400px;border: 1px solid blue;margin:0 auto;position: relative;background: #fff;}
.dian{width:5px;height:5px;background: black;box-shadow: 0 0 20px 1px red;position: absolute;left:297px;top:197px;/*border-width:197px 297px 197px 297px;border-style: solid;border-color:#222 #444 #666 #888;*/}
.line1{width:361px;height:0;border: 1px solid blue;position: absolute;left:0;top:0;transform-origin:left center;transform:rotateZ(33.69deg);}
.line2{width:361px;height:0;border:1px solid red;position: absolute;right:0px;top:0;transform-origin:right center;transform:rotateZ(-33.69deg);}
.line3{width:361px;height:0;border:1px solid black;position: absolute;left:0;bottom:0;transform-origin:left center;transform:rotateZ(-33.69deg);}
.line4{width:361px;height:0;border:1px solid green;position: absolute;right:0;bottom:0;transform-origin:right center;transform:rotateZ(33.69deg);}
.p1{position: absolute;top:0;left:300px}
.p2{position: absolute;top:200px;right:0;}
.p3{position: absolute;bottom:0;left:300px}
.p4{position: absolute;left:0;top:200px}
.p5{font-size: 40px;color:#fff;text-indent: 150px;}

    </style>
</head>
<body>
    <div class="main">
        <p class="p1">200</p>
        <p class="p2">300</p>
        <p class="p3">200</p>
        <p class="p4">300</p>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="dian"></div>
    </div>
    <p class="p5">点击拖动中间小点，获取每条边宽度，画出任意形状三角形</p>
<script type="text/javascript">
var main=document.querySelector('.main');
var line1=document.querySelector('.line1');
var line2=document.querySelector('.line2');
var line3=document.querySelector('.line3');
var line4=document.querySelector('.line4');
var dian=document.querySelector('.dian');
var ap=document.querySelectorAll('p');
var x1,x2,y1,y2,tan1,tan2,tan3,tan4,l1,l2,l3,l4;

dian.onmousedown=function (ev){
    var ev=ev||event;
    x1=ev.clientX-main.offsetLeft;
    y1=ev.clientY-main.offsetTop;
    l1=Math.round(Math.sqrt(x1*x1+y1*y1));
    tan1=Math.atan(y1/x1)*180/Math.PI;
    line1.style.width=l1+'px';
    line1.style.transform='rotateZ('+tan1+'deg)';
// ...................................................
    x2=600-x1;
    l2=Math.round(Math.sqrt(x2*x2+y1*y1));
    tan2=Math.atan(y1/x2)*180/Math.PI;
    line2.style.width=l2+'px';
    line2.style.transform='rotateZ(-'+tan2+'deg)';
// ......................................................
    y2=400-y1;
    l3=Math.round(Math.sqrt(x1*x1+y2*y2));
    tan3=Math.atan(y2/x1)*180/Math.PI;
    line3.style.width=l3+'px';
    line3.style.transform='rotateZ(-'+tan3+'deg)';
// .....................................................
    l4=Math.round(Math.sqrt(x2*x2+y2*y2));
    tan4=Math.atan(y2/x2)*180/Math.PI;
    line4.style.width=l4+'px';
    line4.style.transform='rotateZ('+tan3+'deg)';

document.onmousemove=function (ev){
    var ev=ev||event;
    var x=ev.clientX-main.offsetLeft;
    var y=ev.clientY-main.offsetTop;
    if(x<0){x=0;dian.style.left=x+'px';}else if(x>595){
        x=595;dian.style.left=x+'px';
    }else{dian.style.left=x+'px';}
    if(y<0){y=0;dian.style.top=y+'px';}else if(y>395){
        y=395;dian.style.top=y+'px';
    }else{dian.style.top=y+'px';}
    
    l1=Math.round(Math.sqrt(x*x+y*y));
    tan1=Math.atan(y/x)*180/Math.PI;
    line1.style.width=l1+'px';
    line1.style.transform='rotateZ('+tan1+'deg)';
    // ..............................................
    x2=600-x1;
    l2=Math.round(Math.sqrt((600-x)*(600-x)+y*y));
    tan2=Math.atan(y/(600-x))*180/Math.PI;
    line2.style.width=l2+'px';
    line2.style.transform='rotateZ(-'+tan2+'deg)';
    // ..................................................
    y2=400-y1;
    l3=Math.round(Math.sqrt(x*x+(400-y)*(400-y)));
    tan3=Math.atan((400-y)/x)*180/Math.PI;
    line3.style.width=l3+'px';
    line3.style.transform='rotateZ(-'+tan3+'deg)';
    // ..................................................
    l4=Math.round(Math.sqrt((600-x)*(600-x)+(400-y)*(400-y)));
    tan4=Math.atan((400-y)/(600-x))*180/Math.PI;
    line4.style.width=l4+'px';
    line4.style.transform='rotateZ('+tan4+'deg)';
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{background: #000;}
.main{width:600px;height:400px;border: 1px solid blue;margin:0 auto;position: relative;background: #fff;}
.dian{width:5px;height:5px;background: black;box-shadow: 0 0 20px 1px red;position: absolute;left:297px;top:197px;/*border-width:197px 297px 197px 297px;border-style: solid;border-color:#222 #444 #666 #888;*/}
.line1{width:361px;height:0;border: 1px solid blue;position: absolute;left:0;top:0;transform-origin:left center;transform:rotateZ(33.69deg);}
.line2{width:361px;height:0;border:1px solid red;position: absolute;right:0px;top:0;transform-origin:right center;transform:rotateZ(-33.69deg);}
.line3{width:361px;height:0;border:1px solid black;position: absolute;left:0;bottom:0;transform-origin:left center;transform:rotateZ(-33.69deg);}
.line4{width:361px;height:0;border:1px solid green;position: absolute;right:0;bottom:0;transform-origin:right center;transform:rotateZ(33.69deg);}
.p1{position: absolute;top:0;left:300px}
.p2{position: absolute;top:200px;right:0;}
.p3{position: absolute;bottom:0;left:300px}
.p4{position: absolute;left:0;top:200px}
.p5{font-size: 40px;color:#fff;text-indent: 150px;}
.bian{width:1px;height:1px;border-width: 200px 300px 200px 300px;border-style: solid ;border-color:#222 #444 #666 #888;}

    </style>
</head>
<body>
    <div class="main">
        <p class="p1">200</p>
        <p class="p2">300</p>
        <p class="p3">200</p>
        <p class="p4">300</p>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="dian"></div>
        <div class="bian"></div>
    </div>
    <p class="p5">点击拖动中间小点，获取每条边宽度，画出任意形状三角形</p>
    <script type="text/javascript">
var main=document.querySelector('.main');
var line1=document.querySelector('.line1');
var line2=document.querySelector('.line2');
var line3=document.querySelector('.line3');
var line4=document.querySelector('.line4');
var dian=document.querySelector('.dian');
var ap=document.querySelectorAll('p');
var bian=document.querySelector('.bian');
var x1,x2,y1,y2,tan1,tan2,tan3,tan4,l1,l2,l3,l4;

dian.onmousedown=function (ev){
    var ev=ev||event;
    x1=ev.clientX-main.offsetLeft;
    y1=ev.clientY-main.offsetTop;
    l1=Math.round(Math.sqrt(x1*x1+y1*y1));
    tan1=Math.atan(y1/x1)*180/Math.PI;
    line1.style.width=l1+'px';
    line1.style.transform='rotateZ('+tan1+'deg)';
// ...................................................
    x2=600-x1;
    l2=Math.round(Math.sqrt(x2*x2+y1*y1));
    tan2=Math.atan(y1/x2)*180/Math.PI;
    line2.style.width=l2+'px';
    line2.style.transform='rotateZ(-'+tan2+'deg)';
// ......................................................
    y2=400-y1;
    l3=Math.round(Math.sqrt(x1*x1+y2*y2));
    tan3=Math.atan(y2/x1)*180/Math.PI;
    line3.style.width=l3+'px';
    line3.style.transform='rotateZ(-'+tan3+'deg)';
// .....................................................
    l4=Math.round(Math.sqrt(x2*x2+y2*y2));
    tan4=Math.atan(y2/x2)*180/Math.PI;
    line4.style.width=l4+'px';
    line4.style.transform='rotateZ('+tan3+'deg)';

document.onmousemove=function (ev){
    var ev=ev||event;
    var x=ev.clientX-main.offsetLeft;
    var y=ev.clientY-main.offsetTop;
    if(x<0){x=0;dian.style.left=x+'px';}else if(x>595){
        x=595;dian.style.left=x+'px';
    }else{dian.style.left=x+'px';}
    if(y<0){y=0;dian.style.top=y+'px';}else if(y>395){
        y=395;dian.style.top=y+'px';
    }else{dian.style.top=y+'px';}
    
    l1=Math.round(Math.sqrt(x*x+y*y));
    tan1=Math.atan(y/x)*180/Math.PI;
    line1.style.width=l1+'px';
    line1.style.transform='rotateZ('+tan1+'deg)';
    // ..............................................
    x2=600-x1;
    l2=Math.round(Math.sqrt((600-x)*(600-x)+y*y));
    tan2=Math.atan(y/(600-x))*180/Math.PI;
    line2.style.width=l2+'px';
    line2.style.transform='rotateZ(-'+tan2+'deg)';
    // ..................................................
    y2=400-y1;
    l3=Math.round(Math.sqrt(x*x+(400-y)*(400-y)));
    tan3=Math.atan((400-y)/x)*180/Math.PI;
    line3.style.width=l3+'px';
    line3.style.transform='rotateZ(-'+tan3+'deg)';
    // ..................................................
    l4=Math.round(Math.sqrt((600-x)*(600-x)+(400-y)*(400-y)));
    tan4=Math.atan((400-y)/(600-x))*180/Math.PI;
    line4.style.width=l4+'px';
    line4.style.transform='rotateZ('+tan4+'deg)';
    // .............................................
    ap[0].innerText=y;
    ap[1].innerText=600-x;
    ap[2].innerText=400-y;
    ap[3].innerText=x;
    bian.style.borderTopWidth=y+'px';
    bian.style.borderRightWidth=600-x+'px';
    bian.style.borderBottomWidth=400-y+'px';
    bian.style.borderLeftWidth=x+'px';

};
document.onmouseup=function (){
    document.onmousedown=null;
    document.onmousemove=null;
};


};

    </script>
</body>
</html>


 


// .............................................
    ap[0].innerText=y;
    ap[1].innerText=600-x;
    ap[2].innerText=400-y;
    ap[3].innerText=x;

};
document.onmouseup=function (){
    document.onmousedown=null;
    document.onmousemove=null;
};


};

    </script>




 点击拖动中间小点，得到你想要的三角形形状，获取每条边框的宽度，把其余的三条边设为透明色，就得到了你想要的三角形，是不是很方便？拿走不谢。（第三张代码是最新改进后的 ，看的更直观）







        

        

            posted on 
2018-02-28 19:53 
李业锋 
阅读(605) 
评论(0) 
 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    





            

        

        

            

导航