border与三角等图形构建

最新推荐文章于 2021-08-04 00:35:05 发布

kd丹妮儿

最新推荐文章于 2021-08-04 00:35:05 发布

阅读量278

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/kanghui_898/article/details/70855006

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

效果：
这里写图片描述