css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的。

一下是几个很简单的例子:

  css三角形状的制作:

   
css样式:  
 .triangle{
     width:0;
     height:0;
     border-left:10px solid transparent;
     border-right:10px solid transparent;
     border-top:10px solid red; 
}  方法解释:定义 左右两边边框透明,下边框不定义,上边框定义颜色即可
 
此种样式是上方样式的一种变种,只需将border-left:的宽度设置大一点,代码如下:
 .triangle{
     width:0;
     height:0;
     border-left:30px solid transparent;
     border-right:10px solid transparent;
     border-top:10px solid red; 
同样可以实现左箭头或者右箭头,只需要设置 border-top/border-bottom 颜色为transparent,设置一下右边框的颜色即可
.triangle{
     width:0;

height: 0;
     border-top: 20px solid transparent;
     border-bottom:20px solid transparent;
     border-right:20px solid red;

}
 
这样的效果通过变样的方式也是可以实现的:左边颜色透明,上方和右方设置颜色,下方设置另外一种颜色
.triangle{
            width: 0;
            height: 0;
            border-width: 14px;
            border-style: solid;
            border-color: #ff1515 #ff1515 #920000 transparent;
        }
 
这样的三角和上面的三角的实现思路是一致的:
.triangle{
     width:0;
     height:0;
     border-width:10px;
     border-style:solid;
     border-color:red red transparent transparent;
}
 
实现这种的带边框的三角,一般会用到两个标签div或者span i等随意的标签进行叠加,是可以实现的,还有一种算是投机取巧的方式如下:
使用2个◆符号来实现三角的形状
<span class="z">◆</span> 
<span class="y">◆</span>
 
基本结构如下:
        <div class="x">
            <p><a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。</a></p>
            <span class="z">◆</span> <span class="y">◆</span> 
        </div>
.x{ width:180px; position:relative; background:#fff;  border:1px solid #ccc; padding:10px; left:-4px; top:-4px;}/*内容div*/
.y , .z{position: absolute;left: 141px; }

.y{color: #ccc;font-size: 19px; top:-12px;z-index:1;}/*模拟小三角*/

.z{color: #fff;font-size: 19px;top:-11px;  z-index:3;}/*模拟小三角*/

 
将z中的实心菱形显示在上方,遮盖在y的实心菱形上方,所看到的三角的边框,是y元素的颜色

css实现三角的一些方法的更多相关文章

  1. 使用css实现三角符号

    关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...

  2. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  3. css实现三角箭头(兼容IE6)

    纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...

  4. MathType给公式加三角着重号的方法

    MathType是一款出色的数学公式编辑器,不仅可以兼容word,还与PPT也兼容.它也可以在PPT中编辑出非常漂亮的公式,再加上PPT本身所具有的动画.颜色.显示等功能,在演示数学公式时非常的精美. ...

  5. 【转】CSS z-index 属性的使用方法和层级树的概念

    文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...

  6. Ajax清除浏览器js、css、图片缓存的方法

    做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. ...

  7. css实现居中的各种方法

    css垂直居中有很多种方法,可以参考下这个网站

  8. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. HTML+CSS·经常使用的设计方法

    HTML+CSS·经常使用的设计方法: ======================================================= margin[外] = = padding[内] ...

随机推荐

  1. VMware虚拟机里Ubuntu14.04下安装及配置MySQL

    更新源列表 快捷键"Ctrl+Alt+t"打开"Terminal终端窗口",输入"sudo apt-get update"-->回车- ...

  2. 【Java】集合_Collections_学习记录

    一.Collections工具类概述 1.为List.Set.Map等集合提供大量方法对集合元素进行排序.查询和修改等操作. 2.将集合对象设置为不可变. 3.对集合对象实现同步控制等. 二.排序操作 ...

  3. opencv学习笔记-图像叠加、混合

    在图像处理中,目标区域定义为感兴趣区域ROI(region of Interest),这是后期图像处理的基础,在获取ROI后,进行一些列的处理.ROI区域在Opencv中就是Rect,先构建Rect, ...

  4. VM网络无法连接--提示ethernet0无法连接到虚拟网络

    打开 “编辑->虚拟网络设置"里面,点“恢复默认” 如果还不行 然后 开网络和共享中心 左击  本地连接(若是无线网络,则点击无线网络连接)----属性----共享---- 在:允许其 ...

  5. ListView 分类: WinForm 2014-07-18 22:03 289人阅读 评论(0) 收藏

    一.ListView类(转载) 1.常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示:只有在Details视图该属性才有意义. (2) GridLin ...

  6. 保证相同类型的MDI子窗体只会被打开一次的方法

    本文转载:http://www.cnblogs.com/Ricky81317/archive/2008/09/17/1292443.html 看到论坛中有朋友问,如何可以保证在MDI主窗体中,同一类型 ...

  7. 在hibernate中使用SQL语句

  8. hdu 3729 I'm Telling the Truth 二分图匹配

    裸的二分图匹配.需要输出方案. #include<cstdio> #include<cstring> #include<vector> #include<al ...

  9. nginx代理人server结合tomcat采用

    相信非常多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那到底它有什么作用呢?可能非常多人未必了解. 说到反向代理,可能非常多人都听说,但详细什么是反向代理,非常多人预计就 ...

  10. POCISO-採购创建内部订单(R12.2.3)

     採购创建内部订单(R12.2.3) --US Program:Create Internal Orders Short Name:POCISO Application:Purchasing Ex ...