CSS中如何制作出小三角形？

海鲜king

已于 2022-05-07 15:29:00 修改

阅读量2.6k

点赞数 2

文章标签： html5 css3

于 2022-03-30 14:45:47 首次发布

本文为博主原创文章，未经博主允许不得转载。如有问题，欢迎指正！

本文链接：https://blog.csdn.net/m0_46130595/article/details/123845461

版权

css中制作小三角形思路(我是通过边框制作的)：
先想好自己想设置方向朝哪边的三角形，这里我制作方向朝上的三角形(其他方向类似)
代码即思路如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     	body{
            background-color: antiquewhite;
        }
        
        .box1{
            /* 1.首先设置盒子宽高都为0 */
            width: 0;
            height: 0;
            /*2.设置盒子上下左右边框(注意:根据三角形大小调整边框粗细,颜色要设置为透明transparent) */
            border: 8px solid transparent;
            /*3.根据三角形方向选择设置哪个方向边框为none
                	技巧:设置三角形正对方向的边框为none,比如我想设置朝上的三角形，那就设置上边框为none*/
            border-top: none;
            /*4.最后设置边框颜色，显示出三角形*/
            border-bottom-color: red;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

效果图：在这里插入图片描述

本文版权归作者和CSDN共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。

海鲜king

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS中如何制作出小三角形？

css中制作小三角形思路(我是通过边框制作的)：先想好自己想设置方向朝哪边的三角形，这里我制作方向朝上的三角形(其他方向类似)代码即思路如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
复制链接

扫一扫