css3做各种角度三角形

初学者，做笔记防止遗忘

#triangle{width:0;height:0;border-left: 50px solid transparent;  /*50px为左顶点到上顶点的水平距离*/border-right: 100px solid transparent ;/*100px为右顶点到上顶点的水平距离*/border-bottom: 200px solid red; /*200px为底线到上顶点的水平距离*/}

效果如图：

#triangle1{width: 0;height: 0;border-right: 100px solid red;   /*100px为右线与左顶点距离*/border-bottom: 300px solid transparent;/*300px为下顶点到左顶点的竖直距离*/border-top: 200px solid transparent;}/*200px为上顶点到左顶点的竖直距离*/

效果如图：

以上两种都是有一边要么水平要么竖直，那么我们如何画任意形状的三角形呢？
只要一句代码：transform

 #triangle2{width:0;height:0;border-left: 50px solid transparent;  /*50px为左顶点到上顶点的水平距离*/border-right: 100px solid transparent ;/*100px为右顶点到上顶点的水平距离*/border-bottom: 200px solid red;/*200px为底线到上顶点的水平距离*/transform: rotate(90deg); /*顺时针旋转90度*/}

效果如图，这是第一个三角形顺时针旋转90度后的形状

这是第一个三角形顺时针旋转60度后的形状

本文地址：http://liuyanzhao.com/3424.html

转载请注明

css3做各种角度三角形相关推荐

css3实现各种角度的三角形
在各种互联网web中,我们经常会看到,当鼠标移至一个连接或者点击时,会有一个div弹出,并且有一个三角形指向这个链接,说明这个div是属于这个链接的.例如在csdn的博客中就有图中红色方框的,就是有 ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
css3三角形兼容_利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
html菱形开头做无序,css3 做菱形
css3 做菱形 .demo{ 100px; height: 100px; background:#eef2f3; margin: 50px; overflow: hidden; } .padding ...
html5+css3做的响应式企业网站前端源码
大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1).送给大家哦,获取方式在本文末尾. 图1 首页banner幻灯片切换特效(图2) 图2 首页布局简约合理(图3) 图 ...
用css3做一个模拟火箭飞行的简单动画。
用css3做一个模拟火箭飞行的简单动画,图片我特意上传到了图床,你也可以试试. 效果大概是这样: 需要的知识点: 知道css的transform,transition,animation属性和定义动画 ...
教你用CSS3做一个旋转的宇宙星球
教你用CSS3做一个旋转的宇宙星球可能略有瑕疵,无非就是先画一个圆圈,把小球定位到上面,然后再让圆圈旋转即可直接上效果图代码 <!DOCTYPE html><html lang ...
html语言制作带样式的表格,html制作一个复杂表格 html5/CSS3做一个表格
table td{width: 100px;padding: 5px;}DataDataDataDataDataDataDataDataDataDataDataDataDataDataData 用HT ...
css3 做一个会动的菜单 menu 按钮动画效果
css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo. 设计师给了俩图片,一个是三这样的菜单图标 ...

css3做各种角度三角形

css3做各种角度三角形相关推荐

最新文章

热门文章