<!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. Log4net 配置注意事项

    1. 首先引入Log4net程序集 2.修改webconfig配置文件 在 configuration 节点下面添加如下节点 <configSections> <section na ...

  2. 用js生成下载文件

    function downloadFile(fileName, content) { var aLink = document.createElement('a'); var blob = new B ...

  3. SOA与EBS集成_Package 调用维护

    介绍SOA Suite与EBS集成成,使用PACKAGE调用集成的组合程序的运维方法: 1.打开组合程序,在oracle adapter上右键,选择edit,在配置向导中跳转到第五步,确认组合程序调用 ...

  4. cocos2d-x 实现粒子飞行特效

    效果图 说明 实现效果: 按下鼠标并且移动, 所到之处产生光圈 光圈会以窗口中心为终点, 并且会偏移自身角度对准终点, 然后持续飞行, 直到终点. 附件 下载源码, 请猛击这里!

  5. 一个小玩具：NDK编译FFmpeg的例子

    FFmpeg NDK编译 和最简单的APK 准备 硬件: 一台电脑,实验在Lenovo T430上 一个Android设备,实验在 三星S3/A7 编译环境: Ubuntu 14.04 (ant\ja ...

  6. Pythonchallenge一起来闯关(二)

    前情提要:Pythonchallenge一起来闯关(一) 这一篇来闯关10-15.感觉这几关比先前的难了不少,有的题目完全没思路. 10. 页面源码中的链接点击后有a = [1, 11, 21, 12 ...

  7. javascript Array类型 方法大全

    1,创建数组 //第一种是使用Array构造函数 var colors = new Array(); var colors = new Array(20); //创建length为20的数组 var ...

  8. 使用grunt压缩css是能否设置background-size不压缩进去呢？否则ie8不能识别

    .index-bg{ background:url(img/index-bg-t.5344b19d.jpg) center center/cover no-repeat } 比如上面这样ie8不能识别 ...

  9. Js点餐加减数量

    <button class="add-on" onclick="chgNum(1,'del')" ><i class="icon-m ...

  10. C++的类为什么要用指针

    这个问题原来是这样的: C++的对象和C#不同,C++的对象是放在栈区的,C#的对象是引用类型. 这就意味着,C++进行类型转换的时候,由于调用了复制构造函数,其转换后,对象会丢弃一部分信息. 派生类 ...