<!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. Windows XP CD 函数不正确

    参考这篇文章:http://support.hp.com/cn-zh/document/c00760286 一,在设备管理中查看,如果刻录机名称中含 ROM,则需确认设备是否可写 二,若确定设备可写, ...

  2. (转)JavaWeb学习总结(十三)——使用Session防止表单重复提交

    如何防止表单重复提交 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复 ...

  3. Linq101-Element

    using System; using System.Collections.Generic; using System.Linq; namespace Linq101 { class Element ...

  4. maven指定构建的编码格式

    pom.xml文件添加如下内容: <properties>    <project.build.sourceEncoding>UTF-8</project.build.s ...

  5. indexedDB bootstrap angularjs 前端 MVC Demo

    前端之MVC应用 1.indexedDB(Model): 数据层,前端浏览器 HTML5 API 面向对象数据库,一般现在用的数据库都是关系型数据库. 那么indexeddb有什么特点呢: 首先,从字 ...

  6. 用core dump来调试程序段错误

    有的程序可以通过编译, 但在运行时会出现Segment fault(段错误). 这通常都是指针错误引起的.但这不像编译错误一样会提示到文件->行, 而是没有任何信息, 使得我们的调试变得困难起来 ...

  7. (转载)图解Linux系统的系统架构

    我以下图为基础,说明Linux的架构(architecture).(该图参考<Advanced Programming in Unix Environment>) 最内层是硬件,最外层是用 ...

  8. FMDB警告Warning: there is at least one open result set around after performing的问题

    FMDB操作sqlite的时候总是报警告Warning: there is at least one open result set around after performing,后来发现是执行查询 ...

  9. 封装兼容性添加、删除事件的函数 addEventListener与removeEventListener

    var Event = { addHandler: function (oElement, sEvent, fnHandler) { oElement.addEventListener ? oElem ...

  10. BAT清理垃圾

    @echo off title ϵͳȥm del /f /s /q %systemdrive%\*.tmp del /f /s /q %systemdrive%\*._mp del /f /s /q ...