HTML border CSS输出三角形

有以下一段html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid red;
  border-left:50px solid transparent  ;
  border-right:50px solid transparent  ;
}
    </style>
</head>
<body>
 <div class="triangle_up"></div>   
</body>
</html>

乍一看非常不解，可是效果是这种：



把CSS改一改：

.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid red;
  border-left:50px solid   ;
  border-right:50px solid   ;
}



还是晕，再把宽高改一改：


宽高再改一改：



瞬间恍然大悟。

块的宽高都为0。又巧妙设置了透明。所以看起来就是一个三角形！

posted @ 2017-04-29 18:27  brucemengbm  阅读(413)  评论(0)  编辑  收藏  举报