css绘制三角形及扇形

最新推荐文章于 2022-06-09 23:16:04 发布

南国以北

最新推荐文章于 2022-06-09 23:16:04 发布

阅读量535

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_36725757/article/details/95347836

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css绘制三角形。

1.正三角形（方向在正方向上）

eg：箭头向上

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

规律：箭头的方向不需要写border，与箭头方向相邻的两个方向需要样式

宽度 solid transparent;

与箭头方向相反的方向需要样式

宽度 solid red;

2.方向不在正方向上的

eg：箭头向右上方

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
 
}

扇形

.sector {
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: #f00 transparent transparent;
      border-radius: 50px;
    }