<!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. ubuntu "mkdir -p"命令

    mkdir的-p选项允许你一次性创建多层次的目录,而不是一次只创建单独的目录.例如,我们要在当前目录创建目录Projects/a/src,使用命令: mkdir -p Project/a/src 而不 ...

  2. 使用Volley StringRequest Get的方式进行发票查询操作

    //进行发票查询 btnFpSelect.setOnClickListener(btnFpSelectClickListener); private OnClickListener btnFpSele ...

  3. cf B. Petya and Staircases

    http://codeforces.com/contest/362/problem/B 先排序,然后判断第一个和最后一个是不是脏的,如果是则输出NO,然后判断其中三个脏的是不是连着的,如果是也输出NO ...

  4. Codeforces 56D Changing a String

    http://codeforces.com/contest/56/problem/D 题目大意: 一个字符串变为目标字符串,可以执行插入,置换和删除3种操作,求最少操作数. 思路:dp[i][j]代表 ...

  5. Codeforces 478D Red-Green Towers

    http://codeforces.com/problemset/problem/478/D 思路:dp:f[i][j]代表当前第i层,用了j个绿色方块的方案数,用滚动数组,还有,数组清零的时候一定要 ...

  6. 【转】Ubuntu命令行下安装、卸载、管理软件包的方法

    原文网址:http://oss.org.cn/html/47/n-67447.html 一.Ubuntu中软件安装方法 1.APT方式 (1)普通安装:apt-get install softname ...

  7. AS3排序

    package { import flash.display.Sprite; public class Sort extends Sprite { private var arr:Vector.< ...

  8. HDU4453--Looploop (Splay伸展树)

    Looploop XXX gets a new toy named Looploop. The toy has N elements arranged in a loop, an arrow poin ...

  9. webService返回自定义类型的数据处理

    1.自定义一个Student 数据类型: package com.chnic.webservice; import java.io.Serializable; public class Student ...

  10. [RxJS] Basic DOM Rendering with Subscribe

    While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscri ...