三角形demo

原创 MSDK0723 随笔 html/css 270阅读 2017-05-17 17:19:05 举报

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
.top-triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
.left-triangle{
width: 0;
height: 0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid red;
}

.bottom-triangle{
width: 0;
height: 0;
border-top:100px solid red;
border-left:50px solid transparent;
border-right: 50px solid transparent;
}
.right-triangle{
width: 0;
height: 0;
border-right:100px solid red;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;

}
.f-hr10{display:block;margin-top:10px;}
</style>

</head>

<body>
<div class="top-triangle"></div>
<i class="f-hr10"></i>
<div class="left-triangle"></div>
<i class="f-hr10"></i>
<div class="bottom-triangle"></div>
<i class="f-hr10"></i>
<div class="right-triangle"></div>
<i class="f-hr10"></i>
</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复