<!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. iOS开发：UILabel无法响应点击事件的问题

    UILabel 是默认关闭用户的交互的 即: _contentLabel.userInteractionEnabled = NO; 修改之后: _contentLabel.userInteractio ...

  2. proxifier 注册码

    https://www.proxifier.com/index.htm L6Z8A-XY2J4-BTZ3P-ZZ7DF-A2Q9C(Portable Edition) 5EZ8G-C3WL5-B56Y ...

  3. gitosis使用笔记

    gitosis是Git下的权限管理工具,通过一个特殊的仓库(gitosis-admin.git)对Git权限进行管理. 1:服务端安装并配置gitosis (1)通过以下方式获取到安装包 root@w ...

  4. cf B. Road Construction

    http://codeforces.com/contest/330/problem/B这道题可以围着一个可以与任何一个城市建路的城市建设. #include <cstdio> #inclu ...

  5. logstash 处理tomcat access报ArgumentError: comparison of String with 5 failed

    <pre name="code" class="html"> 10.168.102.19 - - [22/Sep/2016:20:35:11 +08 ...

  6. thinkphp分页时修改last显示标题

    需要修改Page.class.php里lastSuffix为false,这样才能修改last显示标题. 然后就可以设置了 或者直接在方法中声明: $p->lastSuffix = false; ...

  7. 关于<ul><ol><li>的用法

    <ul>:无序列表 <ol>:有序列表 <li>:行. 想要去掉前面的序号和点可以在<ol>或<ul>style中用list-style: ...

  8. [iOS] Create TableView & customize UITableViewCell

    1. First artical, notice the last thing - Connecting the DataSource and Delegate: http://www.appcoda ...

  9. Spring MVC + Spring MongoDB + Querydsl 通过maven整合实例

    效果图 一共3个页面:注册页,欢迎页,用户列表页 很简单的例子,主要是为了把流程走通,没有各种验证. 注册页: 欢迎页: 用户列表页: 源码地址 https://github.com/lemonbar ...

  10. Struts2小结

    Struts 2是在WebWork2基础发展而来的. 注意:struts 2和struts 1在代码风格上几乎不一样. Struts 2 相比Struts 1的优点: 1.在软件设计上Struts 2 ...