CSS绘制三角形和梯形

最新推荐文章于 2024-05-22 17:09:15 发布

末木CT

最新推荐文章于 2024-05-22 17:09:15 发布

阅读量346

点赞数 1

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

本文链接：https://blog.csdn.net/Rachel_CT/article/details/137185176

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以上效果对应的CSS依次如下，从左往右依次看就很直观了。

.border {
  width: 30px;
  height: 30px;
  margin: 10px;
  background-color: lightblue;
  &_1 {
    border: solid 1px #b160e7;
  }
  &_2 {
    border-top: solid 15px lightcoral;
    border-right: solid 15px lightgoldenrodyellow;
    border-bottom: solid 15px lightpink;
    border-left: solid 15px lightseagreen;
  }
  &_3 {
    width: 0px;
    height: 0px;
    border-top: solid 30px lightcoral;
    border-right: solid 30px lightgoldenrodyellow;
    border-bottom: solid 30px lightpink;
    border-left: solid 30px lightseagreen;
  }
  &_triangle {
    width: 0px;
    height: 0px;
    background-color: transparent;
    border-top: solid 30px transparent;
    border-right: solid 30px transparent;
    border-bottom: solid 30px lightpink;
    border-left: solid 30px transparent;
  }
  &_trapezoid {
    background-color: transparent;
    border-right: solid 30px transparent;
    border-bottom: solid 30px lightpink;
    border-left: solid 30px transparent;
  }
}

总结：

1.想要那个方向的三角形就把它两侧的border设为transparent；同时把width和height设置为0，这样图形就能被border填满了。

2.梯形原理同1，只是需要设置width或者height。如上面的梯形上底为元素的30px；下底为左右border加上底部border的宽度，即30 * 3 = 90px。下面稍微改一下更直观，下底宽度为10 + 20 + 30 = 60px。

border_trapezoid {
    background-color: transparent;
    border-right: solid 10px transparent;
    border-bottom: solid 30px lightpink;
    border-left: solid 20px transparent;
  }