<!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. 用js生成下载文件

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

  2. css font的简写规则

    font的属性简写里面常用的有5个是可以写在一起的: font-style设定斜体 如:font-style: italic;font-weight设定文字粗细 如:font-weight: bold ...

  3. 通同select便签实现简单的二级联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 花非花-记一次linux上运行时报找不到库函数错误

    简介: --->:表示依赖 exe ---> a.so ---> utility.so 问题描述: exe运行起来报a.so中的函数f未定义. 解决过程: 一·nm a.so nm ...

  5. Taxi Cab Scheme POJ && HDU

    Online Judge Problem Set Authors Online Contests User Web Board Home Page F.A.Qs Statistical Charts ...

  6. Spring4.0学习笔记(9) —— Spring泛型依赖注入

    1.定义基础仓库 package com.spring.generic.di; public class BaseRepository<T> { } 2.定义基础服务层 package c ...

  7. How to Enable or Disable a cell in DataGridview Row ?

    Following link http://msdn.microsoft.com/en-us/library/ms171619.aspxhttp://windowsclient.net/blogs/f ...

  8. 面向对象设计模式之Flyweight享元模式（结构型）

    动机:采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中,从而带来很高的运行代价——主要指内存需求方面的代价.如何在避免大量细粒度对象问题的同 时,让外部客户程序仍然能够透明地使用面向对象的 ...

  9. 导出页面文档（只在IE8下测试过）

    之前说过一篇关于打印的方法,就顺便也看了一下导出,但是该方法需要用户更改浏览器的安全级别设置,因此并不十分推荐,大家如真有需要可以参考一下ZeroClipboard这款插件,我有时间也会去学习一下并贴 ...

  10. C语言笔记（结构体与offsetof、container_of之前的关系）

    关于结构体学习,需要了解:结构体的定义和使用.内存对齐.结构体指针.得到结构体元素的偏移量(offsetof宏实现) 一.复习结构体的基本定义和使用 typedef struct mystruct { ...