用CSS做一个三角形

最新推荐文章于 2023-08-21 14:47:29 发布

aymfx

最新推荐文章于 2023-08-21 14:47:29 发布

阅读量528

点赞数

分类专栏： html5 文章标签： css

本文链接：https://blog.csdn.net/qq_29104999/article/details/53713426

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

利用border的特性来做一个三角形

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三角形</title>
    <style type="text/css">
           .zsanjiao{
            /*去掉内容*/
            width:0;
            height:0;
            /*解决兼容性*/
            overflow: hidden;
            /*设置三角形的大小和方向,transparent是显示透明*/
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom:50px solid red;
            /*border-style:dashed dashed solid dashed;*/
           }
           /*它的原理*/
           .moxing{width:0;height:0; 
            border-left: 50px solid green;
            border-right: 50px solid pink;
            border-bottom:50px solid red;
            border-top:50px solid red;
           }
    </style>
</head>
<body>
    <div class="zsanjiao"></div>
    <hr/>
    <div class="moxing"></div>
</body>
</html>

aymfx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用CSS做一个三角形

利用border的特性来做一个三角形<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>三角形</title> <style type="text/css"> .zsanjiao{ /*去掉内容*/ width:0;
复制链接

扫一扫

专栏目录