如何用css3画三角形

如何用css3画三角形

三角形实现原理:宽度width为0;height为0;

(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。

(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。

1、Triangle Up

1.png

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

2、Triangle Down

2.png

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

3、Triangle Left

3.png

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

4、Triangle Right

4.png

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

5、Triangle Top Left

5.png

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

6、Triangle Top Right

6.png

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

7、Triangle Bottom Left

7.png

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

8、Triangle Bottom Right

8.png

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

推荐:css手册

以上就是如何用css3画三角形的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏