<!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. GoogLeNet学习心得

    转自:http://blog.csdn.net/liumaolincycle/article/details/50471289#t0 综述: http://blog.csdn.net/sunbaigu ...

  2. scala 入门（1）

    大数据“火”的有段日子了,原来打算学习hadoop…… 后知道spark要比hadoop更牛, 故而转学spark.其原码为scala所写,为了更好的研究spark,故又开始学习scala. 将自己所 ...

  3. XJOI网上同步训练DAY5 T3

    就是对于一个数,我们去考虑把t*****减到(t-1)9999*的代价. #include<cstdio> #include<cmath> #include<algori ...

  4. startkde出现$DISPLAY is not set or cannot connect to the X server

    #startkde $DISPLAY is not set or cannot connect to the X server 解决: xinit /usr/bin/startkde --displa ...

  5. ASP.NET MVC4中的Model验证 移除指定验证信息

    MVC中通过Model在页面间传值使的程序开发变得更加的快捷,但是很多时候,我们在数据传递的时候为了确保数据的有效性,要对Model的相关属性做基本的数据验证. 不多说直接上个代码,Model的实体类 ...

  6. pthread_mutex_init & 互斥锁pthread_mutex_t的使用

    pthread_mutex_init l         头文件: #include <pthread.h> l         函数原型: int pthread_mutex_init( ...

  7. SQL语言的组成

    在正式学习SQL语言之前,首先让我们对SQL语言有一个基本认识,介绍一下SQL语言的 组成: 1.一个SQL数据库是表(Table)的集合,它由一个或多个SQL模式定义. 2.一个SQL表由行集构成, ...

  8. Entity framework - start

    http://blogs.msdn.com/b/adonet/archive/2010/07/19/absolue-beginners-guide-to-entity-framework.aspx?R ...

  9. MVC 校验

    校验保障了MVC 应用程序安全性. Models 文件夹包含表示应用程序模型的类 1,创建一个项目MvcValidateDemo. 2,创建一个实体类UserInfo在Models中,包含Id.Use ...

  10. (转)iOS7界面设计规范(6) - UI基础 - 模态情境

    继续规范.现在听着Clapton的Wonderful Tonight,想想看,整个高二暑假都在为这首歌着迷,经常夜里一边做英语暑期作业一边循环这首歌,心里特别静的赶脚.13年过去了,再听起来,就像隔着 ...