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

avatar 2016年03月15日16:35:02 1 4026 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
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

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

  

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