用div+CSS来实现一个三角形

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

巧克力很苦

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

阅读量1.4k

点赞数

分类专栏： html+css 文章标签：用div+CSS制作三角形

本文链接：https://blog.csdn.net/qq_44607694/article/details/86744426

版权

html+css 专栏收录该内容

54 篇文章 23 订阅

订阅专栏

方法一

布局div，并命名id=“box-1” ，id=“box-2” ，用CSS来控制div，在style里面，使用border属性对div进行控制。

~~源代码~~

<style>
      #box-1{
         width: 0;
         height: 0;
         border-bottom: 30px solid red;
         border-right: 15px solid transparent;
         border-left: 15px solid  transparent;
         margin: 0 auto;
         margin-top: 200px;
      }
      #box-2{
          width: 0;
          height: 0;
          border-top: 30px solid green;
          border-right: 15px solid transparent;
          border-left: 15px solid transparent;
          margin: 0 auto;
      }
    </style>
</head>
<body>
    <div id="box-1"></div>
    <div id="box-2"></div>
</body>

效果
在这里插入图片描述

方法2

布局div，并命名id=“box” ，id=“box1” ，用CSS来控制div，在style里面，使用border属性对div进行控制。
~~源代码~~

<style>
  .box{
      width: 0;
      height: 0;
      border-width: 30px 15px 15px;
      border-style: solid;
      border-color:  black transparent transparent;
      margin: 0 auto;
      margin-top: 200px;
  }
  .box1{
      width: 0;
      height: 0;
      border-width: 15px 15px 30px;
      border-style: solid;
      border-color: transparent transparent blue;
      margin: 0 auto;
  }
</style>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>

效果
在这里插入图片描述