<!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. 牛顿法与拟牛顿法，DFP法，BFGS法，L-BFGS法

    牛顿法 考虑如下无约束极小化问题: $$\min_{x} f(x)$$ 其中$x\in R^N$,并且假设$f(x)$为凸函数,二阶可微.当前点记为$x_k$,最优点记为$x^*$. 梯度下降法用的是 ...

  2. IOS改变状态栏样式

    1.状态栏高亮颜色 在info.plist中添加 View controller-based status bar appearance 设置为 "NO"在AppDelegate. ...

  3. 自定义UITableViewCell时, 使用autoLayout, 无法很好的做到屏幕适配

    解决方法: 重写cell的setFrame方法即可 - (void)setFrame:(CGRect)frame { frame.size.width = self.window.frame.size ...

  4. MySQL被Oracle并购后的409个日日夜夜

    2009年4月20日,Oracle并购了Sun,这也意味着MySQL归属到甲骨文的旗下.四百多天过去了,究竟这场并购结局如何?请看本文. 去年对Sun的收购,让甲骨文顺利的将一个潜在的对手MySQL收 ...

  5. Knockoutjs官网翻译系列（一）

    最近马上要开始一个新项目的研发,作为第一次mvvm应用的尝试,我决定使用knockoutjs框架.作为学习的开始就从官网的Document翻译开始吧,这样会增加印象并加入自己的思考,说是翻译也并不是纯 ...

  6. JavaScript的“闭包”到底是什么(2)

    我的上篇博客标题不对,造成一些误解.我认为博客的宗旨不是背教科书,而是分享研发心得.我的上篇标题因该改成“JavaScript 闭包的一个议题:它对outer scope 的影响”,因为我没有严格地去 ...

  7. gdb调试 使用心得

    1: 对于在应用程序中加入参数进行调试的方法:   直接用 gdb app -p1 -p2 这样进行调试是不行的.   需要像以下这样使用:    #gdb app    (gdb) r -p1 -p ...

  8. N3292x IBR介绍

    N3292x IBR介绍 1 IBR启动流程 图1-1 IBR启动流程 CHIP_CFG[0] Mode 0 Boot from IBR Recovery Mode with crystal inpu ...

  9. TCP/IP-入门

    Life is not a rehearsal "人生没有彩排" 参考资料:TCP/IP入门经典 (第五版) TCP/IP详解 卷一:协议 一.什么是TCP/IP TCP/IP是一 ...

  10. Java学习----main详解

    public class Test1 { public static void main(String[] args) { System.out.println("Hello"); ...