几何之三角形及三角形的组合图案理论

三角形( 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实现三角形及三角形组合图的更多相关文章

  1. 利用CSS3中的clac()实现按照屏幕分辨率自适应宽度

    1.简介 calc()看其外表像个函数.平时在制作页面的时候,总会碰到有的元素是100%的宽度(例如body元素).如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子 ...

  2. 利用CSS3 中steps()制用动画

    .monster { width: 190px; height: 240px; margin: 2% auto; background: url('http://treehouse-code-samp ...

  3. CSS3中三角形及三角形组合图实现

        几何之三角形及三角形的组合图案理论 三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形 若想得到编号①方向向下三角形,只需对编号②③④三角形让其透明tran ...

  4. C#中通过三边长判断三角形类型（三角形测试用例）

    对于<编程之美>P292上关于三角形测试用例的问题,题目是这样的: 输入三角形的三条边长,判断是否能构成一个三角形(不考虑退化三角形,即面积为零的三角形),是什么样的三角形(直角.锐角.钝 ...

  5. 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...

  6. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  7. css3中的几何图形shape研究

    前言 估计大家在日常工作中都会用到css形状,但是目前天朝中使用到最多的估计就是圆(circle).椭圆(ellipse).各种三角形形状,但是你肯定很少看见过用几何图形或者多边图形.假如你不懂什么叫 ...

  8. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  9. CSS3中的变形处理

    在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...

随机推荐

  1. 2013 duilib入门简明教程 -- XML配置界面(6)

        前面那些教程都是为了让小伙伴们从win32.MFC过渡到duilib,让大家觉得duilib不是那么陌生,如果大家现在还对duilib非常陌生的话,那就说明前面的教程做得不好,请大家在下面留言 ...

  2. Nginx服务器之 Nginx的基本配置

    本文使用 Linux centos系统 一.Nginx虚拟主机的配置 虚拟主机:通常情况下,为了使每个服务器可以供更多用户使用,可以将一个服务器分为很多虚拟的子服务器,每个子服务器都是互相独立的.这些 ...

  3. .net基础复习之一

    一.             ADO 与ADO.NET两种数据访问方式区别? 1. ADO与ADO.NET简介ADO与ADO.NET既有相似也有区别,他们都能够编写对数据库服务器中的数据进行访问和操作 ...

  4. LINQ系列：LINQ to SQL Exists/In/Any/All/Contains

    1. Any 返回没有Product的Category var expr = from c in context.Categories where !c.Products.Any() select c ...

  5. 前端学PHP之语句

    × 目录 [1]if语句 [2]switch [3]while[4]do-while[5]for语句[6]foreach[7]break[8]continue[9]goto 前面的话 任何 PHP 脚 ...

  6. Android 对程序异常崩溃的捕捉

    转载博客:http://blog.csdn.net/i_lovefish/article/details/17719081 以下为异常捕捉处理代码: import java.io.BufferedRe ...

  7. Hibernate的数据查找，添加！

    1.首先看一下测试数据库的物理模型 2.测试所需要的Hibernate的jar包 3.数据库的sql /*=============================================== ...

  8. .NET平台机器学习资源汇总，有你想要的么？

    接触机器学习1年多了,由于只会用C#堆代码,所以只关注.NET平台的资源,一边积累,一边收集,一边学习,所以在本站第101篇博客到来之际,分享给大家.部分用过的 ,会有稍微详细点的说明,其他没用过的, ...

  9. 【原创】开源.NET排列组合组件KwCombinatorics使用(一)—组合生成

           本博客所有文章分类的总目录:本博客博文总目录-实时更新 本博客其他.NET开源项目文章目录:[目录]本博客其他.NET开源项目文章目录 KwCombinatorics组件文章目录: 1. ...

  10. mac下无法识别手机usb问题

    一.无论是mac还是windows下连接手机调试android程序,一定要确认手机开启了usb调试.如果没有开启请参考我的步骤.      设置->关于手机->版本号    连续点击版本号 ...