画一个三角形

画一个三角形

<html>

<head>
<title>画一个三角形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0;
height: 0;
border-top: 200px solid red;
border-right: 200px solid transparent;
border-bottom: 200px solid transparent;
border-left: 200px solid transparent;
}

</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

或者

<html>
<head>
<title>画一个三角形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0;
height: 0;
border:100px solid transparent;
border-right: 100px solid red;
}

</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

border:100px solid transparent; 等同于以下：

border-width:100px;

border-style:solid;

border-color:transparent

所以是指的边框的颜色，将其他三边设置为透明。

 

posted @ 2017-11-28 17:47  吴宁宁  阅读(94)  评论(0)    收藏  举报