CSS画三角形

原理：利用CSS将一个div盒子的宽高设为0，边框（border）宽度设为一个较大值（如50px），颜色设为白色（white），上边框颜色设为你想要的颜色，下边框值设为none。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Triangle</title>
</head>
<style type="text/css">
    .Triangle{
        width: 0px;
        height: 0px;
        border: 50px white solid;
        border-top-color: #0099ff;
        border-bottom: none;
    }
</style>
<body>
    <div class="Triangle"></div>
</body>
</html>
效果图：

也可以将上下边框反过来，下边框设为none，将三角形倒过来

 







		

		
posted @ 
2019-08-17 10:19 
Bambo0 
阅读(113) 
评论(0) 
编辑 
收藏 
举报