使用CSS实现三角形

最新推荐文章于 2024-06-19 14:48:22 发布

思绪摸摸头·

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量147

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_44910864/article/details/112688249

版权

使用CSS实现三角形
一个盒子共包括margin+padding+conten+border
如果给盒子设置宽度、高度和边框就会出现下图

  <style>
        .rect {
          width: 100px;
          height: 100px;
          border-color: red palegreen rebeccapurple cadetblue;
          border-style: solid;
          border-width: 20px;
        }
      </style>
</head>
<body>
    <div class='rect'></div>
</body>

在这里插入图片描述
当我们把宽度和高度设置为0就会出现下图

    <style>
        .rect {
          width: 0px;
          height: 0px;
          border-color: red palegreen rebeccapurple cadetblue;
          border-style: solid;
          border-width: 20px;
        }
      </style>
</head>
<body>
    <div class='rect'></div>
</body>

在这里插入图片描述
然后保留一种颜色，把其他的颜色设置为和背景一样的颜色就ok了

    <style>
        .rect {
          width: 0px;
          height: 0px;
          border-color: white white rebeccapurple white;
          border-style: solid;
          border-width: 20px;
        }
      </style>
</head>
<body>
    <div class='rect'></div>
</body>

在这里插入图片描述

思绪摸摸头·

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用CSS实现三角形

使用CSS实现三角形一个盒子共包括margin+padding+conten+border如果给盒子设置宽度、高度和边框就会出现下图 <style> .rect { width: 100px; height: 100px; border-color: red palegreen rebeccapurple cadetblue; border-style: solid; bo
复制链接

扫一扫