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

实例一、
  1. #triangle{
  2.             width:0;
  3.             height:0;
  4.             border-left50px solid transparent;  /*50px为左顶点到上顶点的水平距离*/
  5.             border-right100px solid transparent ;/*100px为右顶点到上顶点的水平距离*/
  6.             border-bottom200px solid red/*200px为底线到上顶点的水平距离*/
  7. }
效果如图: 这里写图片描述 实例二
  1. #triangle1{
  2.             width: 0;
  3.             height: 0;
  4.             border-right100px solid red;   /*100px为右线与左顶点距离*/
  5.             border-bottom300px solid transparent;/*300px为下顶点到左顶点的竖直距离*/
  6.             border-top200px solid transparent;/*200px为上顶点到左顶点的竖直距离*/
  7. }
效果如图:   以上两种都是有一边要么水平要么竖直,那么我们如何画任意形状的三角形呢? 只要一句代码 :transform 实例三
  1. #triangle2{
  2.             width:0;
  3.             height:0;
  4.             border-left50px solid transparent;  /*50px为左顶点到上顶点的水平距离*/
  5.             border-right100px solid transparent ;/*100px为右顶点到上顶点的水平距离*/
  6.             border-bottom200px solid red;/*200px为底线到上顶点的水平距离*/
  7.             transform: rotate(90deg); /*顺时针旋转90度*/
  8.  }
 
效果如图,这是第一个三角形顺时针旋转90度后的形状 这里写图片描述 这是第一个三角形顺时针旋转60度后的形状 这里写图片描述
本文地址:http://liuyanzhao.com/3424.html 转载请注明

发表评论

目前评论:1