转:http://blog.csdn.net/tangtang5963/article/details/51490107

  https://segmentfault.com/a/1190000002780453#articleHeader18

css实现各种图形真是太赞了,再也不用切图了,直接用css就可以实现。

最常用的就是用css实现的小三角了

#triangle-up{
display:inline-block;
width:;
height:;
border-left:30px solid transparent;
border-right: 30px solid transparent;
border-bottom:50px solid red;}
#triangle-down {
display:inline-block;
width:;
height:;
border-left:30px solid transparent;
border-right: 30px solid transparent;
border-top:50px solid red;}
#triangle-left {
display:inline-block;
width:;
height:;
border-top: 30px solid transparent;
border-right: 50px solid red;
border-bottom: 30px solid transparent;}
#triangle-right{
display:inline-block;
width:;
height:;
border-top: 30px solid transparent;
border-left: 50px solid red;
border-bottom: 30px solid transparent;}

#triangle-topleft {
display:inline-block;
width:;
height:;
border-top: 50px solid red;
border-right: 50px solid transparent;
}
#triangle-topright {
display:inline-block;
width:;
height:;
border-top: 50px solid red;
border-left: 50px solid transparent;
}
#triangle-bottomleft {
display:inline-block;
width:;
height:;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
}
#triangle-bottomright {
display:inline-block;
width:;
height:;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
}

通过这样的小箭头在项目中我们可以实现验证提示层箭头这样的样式,非常的实用,再也不用为提示层样式发愁啦。

我们看到了实现css小箭头的style样式中都用到了transparent这样的一个属性,transparent到底是什么意思?于是查看了css参考手册,定义是:

用来指定全透明色彩。

  • transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。
  • 在CSS1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。
  • 在CSS2中,border-color也开始接受transparent作为参数值。
  • 在CSS3中,transparent被延伸到任何一个有color值的属性上。

transparent我总结意思就是透明,无颜色的。

看图,三角形的实现实际上是一个宽度和高度都为0的div的四个边框实现的,如果我们要实现朝下的箭头,那就要让div的左~右 边框都为透明(透明但左右边框还占位置)。

左上箭头 实现思路是什么呢?div的右边框和底部边框都为透明,这样左上角的箭头就露出来了。

css3实现心形

css3实现小箭头,各种图形的更多相关文章

  1. 一个select元素自定义设计的新思路:appearance: none之后利用<>符号制造小箭头

    最近工作时解决了一个前端小问题(如下图所示):在Safari中,select的控件之上有不和谐的灰色部分. 刚开始时我以为是backgrand或是border设置不当之类产生的问题,在搜索了很久之后终 ...

  2. 移除HTML5 input在type="number"时的上下小箭头

    /*移除HTML5 input在type="number"时的上下小箭头*/ input::-webkit-outer-spin-button, input::-webkit-in ...

  3. 去掉Win7快捷方式小箭头(win10通用)

    我是一个有强迫症的优化控 , 因为近视的缘故 , 喜欢将桌面图标放大 ,  但是win7快捷方式的小箭头 , 确实不好看 . 用win7魔方之类的软件 , 可以解决这个问题 , 但是有时候重启 ,   ...

  4. 修改注册表 去除Windows快捷方式图标小箭头

    一些朋友不喜欢Windows系统中快捷方式图标上面的小箭头,下面介绍如何修改注册表去除快捷方式图标上的小箭头. 1.开始->运行->输入regedit,启动注册表编辑器,然后; 2.依次展 ...

  5. CSS3新特性,绘制常见图形

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...

  6. 如何处理Android Studio 上面关于 update 和 commit 小箭头的消失

    问题: android studio 在关联 SVN 或者 git 服务后,会在工具栏出现 update 和 commit 小箭头 如图: 但是,有时你打开工程的时候,发现这两个小箭头却消失不见了 如 ...

  7. css3实现小黄人

    效果就像这样: 不废话,直接上代码! hrml代码: <!DOCTYPE html> <html> <head lang="zh"> <m ...

  8. 清除Windows系统桌面快捷方式小箭头

    清除Windows桌面快捷方式小箭头,需要重启,且不会导致软件无法锁定到任务栏.新建.reg的注册表文件,命名随意,内容如下: Windows Registry Editor Version 5.00 ...

  9. 纯css3样式属性制作各种图形图标

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

随机推荐

  1. #pragma pack(push) 和#pragma pack(pop) 以及#pragma pack()

    我们知道结构体内存对齐字节可以通过#pragma pack(n) 的方式来指定. 但是,有没有想过一个问题,某些时候我想4字节对齐,有些时候我又想1字节或者8字节对齐,那么怎么解决这个问题呢? 此时, ...

  2. java中ThreadExecutor使用注意

    如果使用了submit(Runnable task) 就会出现这种情况,任何的错误信息都出现不了! 这是因为使用submit(Runnable task) 的时候,错误的堆栈信息跑出来的时候会被内部捕 ...

  3. AJAX开发技术

    AJAX技术 AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML),AJAX并不是一项新的技术,它产生的主要目的是用于页面的局部刷新,从之前的代 ...

  4. nginx封ip,禁用IP段的设置说明

    nginx的ngx_http_access_module 模块可以封配置内的ip或者ip段,语法如下: deny IP; deny subnet; allow IP; allow subnet; # ...

  5. 手动安装 MyEclipse6.5 FindBugs

    手动安装步骤: 官方网址:http://findbugs.sourceforge.net/; 下载地址:http://sourceforge.net/projects/findbugs/files/f ...

  6. [wdt]watchdog

    board/ti/am335x/board.c board/ti/am43xx/board.c driver/watchdog/omap_wdt.c include/configs/am43xx_ev ...

  7. Aspose Linux下字体找不到报错

    http://www.aspose.com/docs/display/cellsnet/Smart+Markers http://www.aspose.com/docs/display/cellsja ...

  8. HTTP 响应头信息(Http Response Header) Content-Length 和 Transfer-Encoding

    Tomcat 中响应头信息(Http Response Header) Content-Length 和 Transfer-Encoding 客户端(PC浏览器或者手机浏览器)在接受到Tomcat的响 ...

  9. c++读取文件到vector

    读取一个pts文件到一个vector<Point2f>里面. 其中pts文件如下: version: n_points: { } #include <iostream> #in ...

  10. 什么是API网关?

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/lcx216/article/details/52913645 1.API网关介绍 API网关是一个服务 ...