<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

.duihua span.tp{
border-width: 30px;
border-style: solid;
border-color:transparent transparent red transparent;
left:40px;
top: -60px;
}
.duihua span.bo{
border-width: 30px;
border-style: solid;
border-color:transparent transparent #fff transparent;
left:40px;
top: -59px;
}
.duihua{
width: 300px;height:30px;border:1px solid red;
position: relative;left:100px;top:200px;background: yellow
}
.duihua i{position: absolute;width: 0;height: 0;font-size: 0;}
.duihua i.jiao{
border-width: 16px 16px 16px 8px;
border-style: solid;
border-color: transparent transparent transparent red;
left:300px;
top: -1px;
}
.duihua i.jiaob{
border-width: 16px 16px 16px 8px;
border-style: solid;
border-color: transparent transparent transparent yellow;
left:299px;
top: -1px;
}
</style>
</head>
<body>
<div class="duihua">
<span class="tp"></span>
<span class="bo"></span>
<i class="jiao"></i>
<i class="jiaob"></i>
</div>
</body>
</html>

css 三角实例的更多相关文章

  1. 【27前端】在线css三角

    我们都知道利用css边框的属性可以画出三角形,这里为了方便,我做了一个简单的demo页面供大家使用. 在线css三角

  2. CSS 表格实例

    CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...

  3. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  4. CSS 分页实例

    CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...

  5. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  6. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  7. CSS三角的写法（兼容IE6）

    目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...

  8. CSS代码实例:用CSS代码写出的各种形状图形

    一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square { width: 100px; height: 100px; backgrou ...

  9. CSS技术实例1-使用CSS计数器实现数值计算小游戏实例页面

    一 实例要达到的要求如图所示: 二 分析 1.7个圆角矩形标签(或按钮) 2. 点击触发并开始运算,最后一个标签显示结果 3.计算成功后弹出"万岁"字眼 三 代码实现 关键CSS代 ...

随机推荐

  1. CryEngine3教程合辑

    转载自http://tieba.baidu.com/p/3663800102 作者:Tytaa     中文名称: CryEngine游戏关卡设计训练视频教程第一季 外文名称: 3DMotive In ...

  2. cf B. Valera and Contest

    http://codeforces.com/contest/369/problem/B 先对k个处理,先处理sk%k个为sk/k+1,如果sk/k==0,k个数都为sk/k:对与剩下的数也按照同样的方 ...

  3. 【转】Date类学习总结(Calendar Date 字符串 相互转换 格式化)

    原文网址:http://www.blogjava.net/jerry-zhaoj/archive/2008/10/08/233228.html Date类学习总结 1.计算某一月份的最大天数 Cale ...

  4. c语言结构体1之定义

    这是在复习阶段随便小结的一些东西 别喷哦 结构体定义的三种方式 注意事项: 1结构体括号后面有分号 2#define得放在程序上面 3成员名可以和结构体名相同 4结构体类型不能直接访问成员,也不能赋值 ...

  5. 第32讲 UI组件之 时间日期控件DatePicker和TimePicker

    第32讲 UI组件之 时间日期控件DatePicker和TimePicker 在Android中,时间日期控件相对来说还是比较丰富的.其中, DatePicker用来实现日期输入设置,    Time ...

  6. iPhone 5，6，6 plus 尺寸

  7. [转]用Node.js创建自签名的HTTPS服务器

    用Node.js创建自签名的HTTPS服务器 创建自己的CA机构 创建服务器端证书 创建客户端证书 将证书打包 创建自己的CA机构 为CA生成私钥 openssl genrsa -out ca-key ...

  8. 【Cocos2d-X开发学习笔记】第19期：动作管理类（CCActionManager）的使用

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 一.动作管理类 动作管理类CCActionMan ...

  9. BuguMongo是一个MongoDB Java开发框架，集成了DAO、Query、Lucene、GridFS等功能

    http://code.google.com/p/bugumongo/ 简介 BuguMongo是一个MongoDB Java开发框架,它的主要功能包括: 基于注解的对象-文档映射(Object-Do ...

  10. Sonar入门(五):使用 Sonar 进行代码质量管理

    Sonar 概述 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具. 与持续集成工具(例如 Hudson/Jenkins ...