css实现三角形

最新推荐文章于 2024-08-20 23:23:54 发布

码代码的程序员

最新推荐文章于 2024-08-20 23:23:54 发布

阅读量262

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_41615439/article/details/104311114

版权

css 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

css实现三角形的原理就是控制元素的border属性，如果要显示一个向上的三角形，就不要border-top属性，然后它的相反方向的border-bottom:要比平常的大一倍，具体看如下代码：

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
              /*上*/
              .san {
                   width: 0;
                   height: 0;
                   border-left: 50px solid transparent;
                   border-right: 50px solid transparent;
                   border-bottom: 100px solid #ff0066;
              }
              /* 下 */
              
              .san_xia {
                   width: 0;
                   height: 0;
                   border-left: 10px solid transparent;
                   border-right: 10px solid transparent;
                   border-top: 20px solid red;
              }
              /* 右 */
              
              .san_zuo {
                   width: 0;
                   height: 0;
                   border-top: 50px solid transparent;
                   border-bottom: 50px solid transparent;
                   border-left: 100px solid #333;
              }
              /* 左 */
              .san_you {
                   width: 0;
                   height: 0;
                   border-top: 50px solid transparent;
                   border-right: 100px solid #0066ff;
                   border-bottom: 50px solid transparent;
              }
          </style>
     </head>
     <body>
          <div class="san"></div>
          <div class="san_xia"></div>
          <div class="san_zuo"></div>
          <div class="san_you"></div>
     </body>
</html>