版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/kanghui_898/article/details/70855006
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>制作我的第一个网页</title>
<style type="text/css">
.triangle{
width:100px;
height:100px;
border:100px solid;
border-color:red green blue orange;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="triangle">
</div>
</body>
</html>效果：
三角形：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>制作我的第一个网页</title>
<style type="text/css">
.triangle{
width:0px;
height:0px;
border:100px solid;
border-color:red red transparent transparent;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="triangle">
</div>
</body>
</html>效果：
圆角矩形：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>制作我的第一个网页</title>
<style type="text/css">
.borderTop{
width:200px;
height:2px;
border:3px solid;
border-color:transparent transparent red transparent;
}
.content{
width:206px;
height:100px;
background-color:red;
}
.borderBottom{
width:200px;
height:2px;
border:3px solid;
border-color:red transparent transparent transparent;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="borderTop"></div>
<div class="content"></div>
<div class="borderBottom"></div>
</body>
</html>效果：
