css怎么写一个直角三角形

csS写一个直角三角形的方法：首先创建一个HTML示例文件；然后去除底边宽度，实现等腰直角三角形；最后加宽上边宽度，实现想要的直角三角形即可。

本教程操作环境：windows7系统、HTML5& & CSS3版、Dell G3电脑。

@H_304_12@利用css写直角三角形

style>
/*原理：第一步*/.box1{
    	width: 0;
    	height: 0;
    	border-top: 50px solid green;
    	border-right: 50px solid red;
    	border-bottom: 0px solid yellow;
     /*1.底边去除就变成直角三角形*/	border-left: 50px solid blue;
}
/*原理：第二步*/.box2{
    	width: 0;
    	height: 0;
    	border-top: 100px solid green;
     /*2.上边拉长就会变成直接三角形*/	border-right: 50px solid red;
    	border-bottom: 0px solid yellow;
     /*1.底边去除就变成直角三角形*/	border-left: 50px solid blue;
}
/*实现*/.box{
    	width: 0;
    /*1.设置宽高为0*/	height: 0;
    	/*2.除右边都变透明色，实边*/	border-color: transparent red transparent transparent;
    	border-style: solid;
    	border-width: 100px 50px 0 0;
 /*3.上边宽100，右边宽50，下左边宽0*/}
    /style>
    原理第一步，去除底边宽度，实现等腰直角三角形：p class="box1">
    /p>
    原理第二步，加宽上边宽度，实现想要直角三角形：p class="box2">
    /p>
    实现，把上边，左边边变透明色：p class="box">
    /p>

【推荐：《css视频教程》】

效果：

原理第一步，去除底边宽度，实现等腰直角三角形：

原理第二步，加宽上边宽度，实现想要直角三角形：

实现，把上边，左边边变透明色：

以上就是css怎么写一个直角三角形的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！