技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 用CSS绘制各种角度的三角形

用CSS绘制各种角度的三角形

浏览:1138次  出处信息

   下面是一些利用CSS中border的特性绘制的各种角度的三角形:

   (1)正方形

正方形

图1:正方形

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-left: 50px solid gray;
        border-right : 50px solid green;
        border-bottom: 50px solid red;
        border-top : 50px solid yellow;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   如上图1,由于设置了width、height都为0了,所以四个点也就归并成了一个点,后面的各种角度的三角形,其实也就是不断调整那个中心点而已。

   (2)向上三角

向上三角

图2:向上三角

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right : 50px solid transparent;
        border-bottom: 100px solid red;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   (3)向下三角

向下三角

图3:向下三角

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right : 50px solid transparent;
        border-top: 100px solid red;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   (4)向左三角

向左三角

图4:向左三角

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-right: 100px solid red;
        border-top : 50px solid transparent;
        border-bottom: 50px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   (5)向右三角

向右三角

图5:向右三角

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-left: 100px solid red;
        border-top : 50px solid transparent;
        border-bottom: 50px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   (6)左上三角

左上三角

图6:左上三角

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-top : 100px solid red;
        border-right: 100px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   (7)右上三角

右上三角

图7:右上三角

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-top : 100px solid red;
        border-left: 100px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   (8)左下三角

左下三角

图8:左下三角

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-bottom : 100px solid red;
        border-right: 100px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   (9)右下三角

右下三角

图9:右下三角

   代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<style type="text/css">
    #triangle {
        width : 0;
        height: 0;
        border-bottom : 100px solid red;
        border-left: 100px solid transparent;
    }
</style>
</head>
<body>
<div id="triangle"></div>
</body>
</html>

   

建议继续学习:

  1. 经典证明:任意三角形都能被分成n≥4个等腰三角形    (阅读:4847)
  2. 能否在等边三角形点阵中画一个正方形?    (阅读:4179)
  3. 三角形变形记之纯css实现的分布导航条效果    (阅读:3514)
  4. 经典证明:等边三角形内一点到各顶点的距离长可构成一个三角形    (阅读:3168)
  5. border:none;与border:0;的区别    (阅读:2525)
  6. borderl:none;与border:0;的区别    (阅读:2077)
  7. 重温CSS:Border属性    (阅读:1962)
  8. CSS Border使用小分享    (阅读:1636)
  9. 网页游戏中的动物世界法则和三角形法则    (阅读:1663)
  10. 怎样把一个钝角三角形分成若干个锐角三角形    (阅读:1397)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1