CSS三角

最新推荐文章于 2024-05-24 10:29:27 发布

安澜仙王

最新推荐文章于 2024-05-24 10:29:27 发布

阅读量58

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/sinat_28317385/article/details/119973500

版权

CSS 三角形边框低版本浏览器图形绘制

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

在这里插入图片描述

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 0;
                height: 0;
                border-top: 10px solid #00B057;
                border-bottom: 10px solid #0055ff;
                border-left: 10px solid #aaaa7f;
                border-right: 10px solid #ff55ff;
            }
            .box2{
                margin-top: 50px;
                width: 0;
                height: 0;
                /* 为了兼容低版本浏览器 下面两句话*/
                line-height: 0;
                font-size: 0;
                border: 10px solid transparent;
                border-top-color: #00B057;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        
        <div class="box2"></div>
    </body>
</html>

兼容低版本

 .box2{
                margin-top: 50px;
                width: 0;
                height: 0;
                /* 为了兼容低版本浏览器 下面两句话*/
                line-height: 0;
                font-size: 0;
                border: 10px solid transparent;
                border-top-color: #00B057;
            }