CSS写三角

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

张张张96

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

阅读量711

点赞数

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

本文链接：https://blog.csdn.net/Girl_0919/article/details/73396008

版权

Css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css写小三角

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .dot {
            width:0;
            height: 0;
            /*font-size: 0;*/
            /*line-height: 0;*/

            border-width: 10px;
            border-style: solid;  /*必须设置，默认样式为none*/
            /*border-bottom-style: solid;*/

            border-top-color: red;
            border-bottom-color: pink;
            border-left-color: blue;
            border-right-color: yellow;
        }
        /*向下箭头*/
        .top{
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        /*向右箭头*/
        .left{
            border-right-color: transparent;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        /*向左箭头*/
        .right{
            border-left-color: transparent;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        /*向上箭头*/
        .bottom{
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
        }
    </style>
</head>
<body>
  <div class="dot top"></div>
  <div class="dot bottom"></div>
  <div class="dot left"></div>
  <div class="dot right"></div>
</body>
</html>

张张张96

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS写三角

css写小三角<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .dot { width:0; height: 0; /*font-size: 0;*/
复制链接

扫一扫