css制作如平行四边形等图形中角度的角度控制
2016-06-26 18:53
316 查看
先给个图形
就不介绍如何用css做平行四边形了,主要介绍的是平行四边形中锐角的角度如何精确的用css写出来,。。。。
在我们给border-right取值的时候我们取如上图黑色直线分割开的三角形最上边的那一条边就行了。原理其实很简单在我们了解了平行四边形这样的图形制作的原理后,我们知道整个图形其实是由边框制作的,而图形的角度是由边框的px的大小决定的。如上图所示,我们设置这个平行四边形的角度其实是通过控制border-right和borde-left的像素来控制的,当我们设置了两边边框的像素后在隐藏她们就会显示如上图的样子。还是画个图来解释吧,就下面这张图,绿色就是左边隐藏的部分。不想解释了。
相关文章推荐
- CSS基础
- CSS盒子模型(续一)
- css基础
- CSS经典权重5道题解析
- 08、css框架与表格
- HTML+CSS
- 浮动元素float的详细内幕
- CSS3入门
- 07、css列表
- CSS样式技巧总结
- 06、css定位与浮动
- css3中translation用法的几点感悟
- js css实现垂直方向自适应的三角提示菜单
- js css实现垂直方向自适应的三角提示菜单
- 面包屑 CSS(合并小图标,减少链接请求数量)
- CSS 清除浮动的方法
- CSS Floating:Floats and Float Shapes-O'Reilly 2016(读书笔记)
- CSS选择器优先级
- 浅析CSS——元素重叠及position定位的z-index顺序
- css选择器概述