CSS画三角形的两种方法

最新推荐文章于 2024-08-12 10:59:58 发布

ArthurHsing

最新推荐文章于 2024-08-12 10:59:58 发布

阅读量802

点赞数 1

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

本文链接：https://blog.csdn.net/qq_21522331/article/details/107955193

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

代码

  <style>
    /* 第一种 */
    div:first-child {
      width: 100px;
      height: 100px;
      /* 如果前后两个颜色的渐变的开始点一样的话，那么在这个位置上就会形成一条明确的分界线 */
      background: linear-gradient(45deg, red 50%, green 50%); 
      /* 或者这样，红色的开始在0，结束在50%，绿色从50%开始，这样也会形成一条鲜明的分界线 */
      /* background: linear-gradient(45deg, red 0, 50%, green 50%); */
      /* 或者这样，找个工具人blue,blue的开始和结束都在50%，相当于它没用，就做了个分界线的作用，这时候green的位置已经不重要了*/
      /* background: linear-gradient(45deg, red 0%, 50%, blue 50%, 50%, green); */
    }

    div:nth-child(2) {
      /* 和上面的三角形分隔开 */
      margin-top: 50px;
      /* 第二种 */
      /*inline也行*/
      display: inline-block;
      border-top: 100px solid black;
      border-bottom: 100px solid transparent;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
    }
  </style>
</head>

<body>
  <div>
  </div>
  <div>
  </div>
</body>