CSS绘制三角形和梯形

最新推荐文章于 2025-01-28 08:03:01 发布

末木CT

最新推荐文章于 2025-01-28 08:03:01 发布

阅读量387

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/Rachel_CT/article/details/137185176

版权

以上效果对应的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 transpa