border与三角等图形构建

来源：互联网发布：天界宠物升品数据编辑：程序博客网时间：2024/06/05 04:22

<!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>

效果：
这里写图片描述

0 0