<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻标题实例</title>
<style type="text/css">
#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
#demo:before, #demo:after{
width:0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}
/*注意content虽然没有值，但是必须得加上*/

#demo:before{
border-width:10px;
border-left-color: #000;
top:20px;
}
#demo:after{
/* border-width:8px; 是为了覆盖黑色的框。*/
border-width:8px;
border-left-color: #fff;
top:22px;
}
</style>
</head>
<body>
<div id="demo">

</div>
</body>
</html>

css实现小三角效果的更多相关文章

  1. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  2. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  3. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  4. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  5. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  6. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  7. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  8. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

  9. css 兼容小三角

    <!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...

随机推荐

  1. 修改tt模板让ADO.NET C# POCO Entity Generator With WCF Support 生成的实体类继承自定义基类

    折腾几天记载一下,由于项目实际需要,从edmx生成的实体类能自动继承自定义的基类,这个基类不是从edmx文件中添加的Entityobject. 利用ADO.NET C# POCO Entity Gen ...

  2. qq第3方登录的JS实现方式记录

    首先申请qq第3方登录接入的appkey和appid,具体方式http://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth ...

  3. Binary XML file : Error inflating class com.esri.android.map.MapView

    在测试esri arcgis for android的第一个程序Helloworld的时候,报这样的错: Binary XML file : Error inflating class com.esr ...

  4. 对ajax的hack的分析

    先上原文链接:对jQuery ajax请求成功(失败)回调执行前的统一处理(兼容较老版本jQuery) 原文中已经提到了使用场景了,我觉得这非常适合单页面应用,还有backbone应用中.毕竟ajax ...

  5. 新修改了EMA的计算方法，合并线性回归率的计算。和通达信的结果一模一样

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  6. idea 多模块项目依赖父工程class找不到问题

    比如,我们有这么个过程,项目结构如下: a --b --c a是总结点,b是子节点,c是父节点 b依赖父节点class,通过maven构建时通常我们会在子节点中添加父节点依赖,如: <depen ...

  7. java_reflect_03

    关于反射在annotation中的使用,这也是本次我个人学习反射的主要目的 关于什么是annotation后续我也会整理一下,现在只大致介绍一下 一,Annotation(注解)简介: 注解大家印象最 ...

  8. Starting and Stopping Oracle Fusion Middleware

    指定用户名密码启动管理服务器 You can start and stop Oracle WebLogic Server Administration Servers using the WLST c ...

  9. AutoIt3初探（1）

    AutoIt3可实现系统操作,键盘鼠标模拟,是自动化测试的一个好工具. 这个是在线帮助文档,http://www.jb51.net/shouce/autoit/ 需要先下载一个autoIt安装,然后将 ...

  10. zsh中home键失灵问题

    putty访问linux时,如果出现这个情况,可以更改配置中Connection->Data->Terminal-type-string,改为linux,再连接即可 mac下可打开终端的配 ...