【html和css入门】css3做各种角度三角形

avatar 2016年03月15日16:35:02 1 3398 views
博主分享免费Java教学视频，B站账号：Java刘哥
实例一、
  1. #triangle{
  2.             width:0;
  3.             height:0;
  4.             border-left: 50px solid transparent;  /*50px为左顶点到上顶点的水平距离*/
  5.             border-right: 100px solid transparent ;/*100px为右顶点到上顶点的水平距离*/
  6.             border-bottom: 200px solid red; /*200px为底线到上顶点的水平距离*/
  7. }
效果如图： 这里写图片描述 实例二
  1. #triangle1{
  2.             width: 0;
  3.             height: 0;
  4.             border-right: 100px solid red;   /*100px为右线与左顶点距离*/
  5.             border-bottom: 300px solid transparent;/*300px为下顶点到左顶点的竖直距离*/
  6.             border-top: 200px solid transparent;/*200px为上顶点到左顶点的竖直距离*/
  7. }
效果如图：   以上两种都是有一边要么水平要么竖直，那么我们如何画任意形状的三角形呢？ 只要一句代码 ：transform 实例三
  1. #triangle2{
  2.             width:0;
  3.             height:0;
  4.             border-left: 50px solid transparent;  /*50px为左顶点到上顶点的水平距离*/
  5.             border-right: 100px solid transparent ;/*100px为右顶点到上顶点的水平距离*/
  6.             border-bottom: 200px solid red;/*200px为底线到上顶点的水平距离*/
  7.             transform: rotate(90deg); /*顺时针旋转90度*/
  8.  }
 
效果如图，这是第一个三角形顺时针旋转90度后的形状 这里写图片描述 这是第一个三角形顺时针旋转60度后的形状 这里写图片描述
本文地址：http://liuyanzhao.com/3424.html 转载请注明
历史上的今天
三月
15日
  • 微信
  • 交流学习，有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享，问题解决，技术交流。群号：590480292
  • weinxin
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0