利用CSS3中transparent实现三角形及三角形组合图
几何之三角形及三角形的组合图案理论
三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形
若想得到编号①方向向下三角形,只需对编号②③④三角形让其透明transparent;border-top设置需要显示颜色即可
若想得到编号②方向向左三角形,只需对编号①③④三角形让其透明transparent;border-right设置需要显示颜色即可
若想得到编号④方向向右三角形,只需对编号①②③三角形让其透明transparent;border-left设置需要显示颜色即可
若想得到编号③方向向上三角形,只需对编号①②④三角形让其透明transparent;border-bottom设置需要显示颜色即可
若想得到编号①③三角形,只需对编号②④让其透明transparent即可
(如下图所示 )
HTML代码体现
利用伪类:after实现矩形与三角形组合 优点代码简洁
利用伪类实现较复杂组合
资料参考 http://www.cnblogs.com/zjneter/p/5652006.html
利用CSS3中transparent实现三角形及三角形组合图的更多相关文章
- 利用CSS3中的clac()实现按照屏幕分辨率自适应宽度
1.简介 calc()看其外表像个函数.平时在制作页面的时候,总会碰到有的元素是100%的宽度(例如body元素).如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子 ...
- 利用CSS3 中steps()制用动画
.monster { width: 190px; height: 240px; margin: 2% auto; background: url('http://treehouse-code-samp ...
- CSS3中三角形及三角形组合图实现
几何之三角形及三角形的组合图案理论 三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形 若想得到编号①方向向下三角形,只需对编号②③④三角形让其透明tran ...
- C#中通过三边长判断三角形类型(三角形测试用例)
对于<编程之美>P292上关于三角形测试用例的问题,题目是这样的: 输入三角形的三条边长,判断是否能构成一个三角形(不考虑退化三角形,即面积为零的三角形),是什么样的三角形(直角.锐角.钝 ...
- 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...
- CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
- css3中的几何图形shape研究
前言 估计大家在日常工作中都会用到css形状,但是目前天朝中使用到最多的估计就是圆(circle).椭圆(ellipse).各种三角形形状,但是你肯定很少看见过用几何图形或者多边图形.假如你不懂什么叫 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- CSS3中的变形处理
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...
随机推荐
- kettle资源库配置
资源库的作用:资源库是用来保存操作步骤和相关的日志,转换,JOB 等信息.用户通过图形界面创建的的转换任务可以保存在资源库中.资源库可以是各种常见的数据库,用户通过用户名/ 密码来访问资源库中的资源, ...
- dd
1.属性 关键:get,set public class Account { private string id; private decimal money; public string Id { ...
- VMware Workstation and Hyper-V are not compatible. 解决方案
VMware 和 Hyper-V 不能共存问题报错如下:VMware Workstation and Hyper-V are notcompatible. Remove the Hyper-V rol ...
- SQL Server 堆表行存储大小(Record Size)
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 堆表行记录存储格式(Heap) 案例分析(Case) 参考文献(References) 二.背 ...
- CSS系列:CSS文字样式
1. 设置字体 在CSS中字体通过font-family属性来设置. font-family: Verdana, Arial, Helvetica, sans-serif; 上面的字体设置告诉浏览器首 ...
- 【Win10应用开发】相对布局(RelativePanel)
外面的雨下得很大,老周就决定雨下漫笔了. 今天咱们说一个新控件——RelativePanel.本质上,它就是一个面板,面板干啥用的?面板就是一个容器,里面可以放其他对象,就像我们小时候玩的七巧板一样, ...
- jQuery源码分析系列(38) : 队列操作
Queue队列,如同data数据缓存与Deferred异步模型一样,都是jQuery库的内部实现的基础设施 Queue队列是animate动画依赖的基础设施,整个jQuery中队列仅供给动画使用 Qu ...
- ImageView设置边框的两种方式
转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...
- Codeforces Round #326 (Div. 2) B. Pasha and Phone C. Duff and Weight Lifting
B. Pasha and PhonePasha has recently bought a new phone jPager and started adding his friends' phone ...
- TextView+Fragment实现底部导航栏
前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...