<!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. cf C. Fixing Typos

    http://codeforces.com/contest/363/problem/C s2用于存处理之后的字符串,再遍历s1的时候,s2会有两种情况1.s2最后两个字符是相同的如xx,如果这时再遇到 ...

  2. cf C. Purification

    http://codeforces.com/contest/330/problem/C 这道题分三种情况.有一行全是E,有一列全是E,还有一种为无解的情况. #include <cstdio&g ...

  3. KEIL简单实例

    好久都没有用KEIL了,突然想动手,一时还真不知道从哪开始写,所以先弄个小实例,以便参考:#include <reg52.h>  //加载包括一个52标准内核的头文件,里面主要是一些寄存器 ...

  4. 开发支付宝支付用DELPHI实现 RSA签名

    近来根据业务需求 在ERP中集成了微信支付,支付宝支付,开发支付宝支付时最大的障碍就是RSA签名,找了很多资料,最终用 下了个libeay32.pas  根据网上资料最终解决了问题 function  ...

  5. 微软的操作系统中让 32 位支持大于 4GB 的内存。

    先给一个参考文献:The RAM reported by the System Properties dialog box and the System Information tool is les ...

  6. 转:linux shell 数组建立及使用技巧

    linux shell在编程方面比windows 批处理强大太多,无论是在循环.运算.已经数据类型方面都是不能比较的. 下面是个人在使用时候,对它在数组方面一些操作进行的总结. 1.数组定义 [che ...

  7. 【开源】Hawk-数据抓取工具：简明教程

    1.软件介绍 HAWK是一种数据采集和清洗工具,依据GPL协议开源,能够灵活,有效地采集来自网页,数据库,文件, 并通过可视化地拖拽, 快速地进行生成,过滤,转换等操作.其功能最适合的领域,是爬虫和数 ...

  8. SQL - 删掉数据库

    ALTER DATABASE [DB_NAME]SET OFFLINEWITH ROLLBACK IMMEDIATEGODROP DATABASE [DB_NAME]GO

  9. WPF与输入法冲突研究之一：百度输入法会导致WPF程序的崩溃！

    在学习和使用了WPF一段时间之后,有点感觉WPF是个不太成熟的框架,不知道是我学的太肤浅,还是WPF得BUG太多! >>>>>>>模拟场景<<&l ...

  10. (转载)XML Tutorial for iOS: How To Choose The Best XML Parser for Your iPhone Project

    There are a lot of options when it comes to parsing XML on the iPhone. The iPhone SDK comes with two ...