<html>

　　<div class="con"></div>

</html>

<style>

　　.con{width:0; height:0; border-width:10px; border-style:solid; border-color:#f40 #f40 transparent transparent;}

</style>

如何运用CSS写小三角的更多相关文章

  1. CSS通过边框border-style来写小三角

    <!DOCTYPE html> /*直接复制代码即可在浏览器验证*/ <html> <head lang="en"> <meta char ...

  2. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  3. css的小三角实现的方式

    先上一个简单的例子哈: 此时的方向向下. 如果想方向向上的话用:border-top:0;border-bottom:4px solid; 1. width:0 height:0 border宽度,颜 ...

  4. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  5. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  6. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  7. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  8. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  9. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

随机推荐

  1. QT socket相关

    #include<QtNetwork/QTcpSocket>#include<QtNetwork/QTcpServer> 1.服务器端 void About::init_tcp ...

  2. iOS 国际化(本地化)

    转自http://www.cocoachina.com/industry/20140526/8554.html 简单说,国际化是一个应用程序国际兼容性设计的过程,比如: 1.以用户母语处理文本输入和输 ...

  3. Resolving SQL Server Disk IO bottlenecks

    网上看到这篇文章挺不错的,直接翻译过来.在尝试诊断SQL Server性能时,不要仅仅依赖某个单一的诊断数据,比如CPU的使用率.SQL Server磁盘性能,就得出结论却忽略的问题的根源.实际上,使 ...

  4. Silverlight类百度文库在线文档阅读器

    百度文库阅读器是基于Flash的,用Silverlight其实也可以做. 我实现的在线阅读器可以应用于内网文档发布,在线阅览审批等.没有过多的堆积功能,专注于核心功能.主要有以下特性: 1. 基于XP ...

  5. length属性，length()方法和size()的方法的区别

    一.java 1.length属性是针对Java中的数组来说的,要求数组的长度可以用其length属性: 2.length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方 ...

  6. Eclipse安装svn插件的几种方式

    Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...

  7. 扩展Wcf call security service, 手动添加 Soap Security Head.

    有次我们有个项目需要Call 一个 Java 的 web service, Soap包中需要一个 Security Head <soapenv:Header> <wsse:Secur ...

  8. DEV全选多选小技巧

    var v1 = bindingSourceBase.DataSource as DataTable; foreach (DataRowView v in v1.DefaultView) { v[&q ...

  9. java布局学习 （二）

    前文中介绍了FlowLayout和BorderLayout 本文我们将会继续介绍java中的布局方式 (3)GridLayout 网格布局 这种布局会将整个容器划分成M行*N列的网格. 如下图:    ...

  10. 家长-Parents表增加字段Token，Gender，Email，Portrait

    家长-Parents表增加字段Token,Gender,Email,Portrait ) ) ) )