<!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. oracle 关于动态执行语句 execute immediate 的用法

    当在开发的应用场景中 数据库处理复杂业务逻辑里用到 SQL 语句拼接    可以用  execute immediate   来执行语 举个例子 insert into tb_temp_public( ...

  2. UITextView textViewShouldEndEditing

    最近做到UITextView, 在取消键盘事件上我以为和UITextField差不多,于是我这样写: UITextView *textView = [[UITextView alloc] initWi ...

  3. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. @font-face扒站的步骤

    今天模仿百度首页手机版的时候遇到的@font-face的问题,现在整理一下. 问题:图中红色区域,在拷贝F12样式的时候,并没有出现这些小图标.        图1:百度的效果             ...

  5. error: File not found by glob???

    引发上述问题的几种情形: 1.rpm包的包名中含有“[.]”这类特殊符号; 2.执行rpm -ivh xxxx.rpm时,xxxx包名不存在; 3.rpm包顶层的目录名不存在或者存在问题:     - ...

  6. Python自动化运维之16、线程、进程、协程、queue队列

    一.线程 1.什么是线程 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位. 一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行 ...

  7. python模块之time和datetime

    33.python模块之time      1.>>> time.time() 1470900847.8458395 ==>时间戳,从1970年到现在.      2.> ...

  8. DCI

    理论: 某个data,在一个特定的场景中,以某个角色role,来与该场景中的其他角色进行交互.这个过程要以代码的方式表达出来,他要求data本身不具备交互行为, 有交互行为的是角色,当一个data没有 ...

  9. traceroute命令

    traceroute指令让你追踪网络数据包的路由途径,预设数据包大小是40Bytes,用户可另行设置. 通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次 ...

  10. FFT快速傅立叶

    Description 给出两个n位10进制整数x和y,你需要计算x*y. Input 第一行一个正整数n.第二行描述一个位数为n的正整数x.第三行描述一个位数为n的正整数y. Output 输出一行 ...