Home  >  Article  >  Web Front-end  >  利用边框border的属性做小符号_html/css_WEB-ITnose

利用边框border的属性做小符号_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:05:401091browse

前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址。最后问了同学,才得知是用border属性做出来的。

符号如右: 

其css代码如下:

.fuhao{    position:absolute;    top:12px;    left:12px;    width:0px;    height:0px;    overflow:hidden;    border-width:6px 0px 6px 6px;    border-color:transparent #A92222;    border-style:dashed none dashed solid;}

这里是利用一个空的div即fuhao,给它定义好位置后,让它高度和宽度都为0,但边框具有宽度。那么这个div里面什么有没有,只剩下边框。

按道理来说应该是这样的:

然后下面的语句给上下边框做了透明transparent处理,右边框做0px处理,就得出了那个符号了。

其实,我也不是很明白,但觉得用边框border来做符号非常有趣,就所见所得,拿来即用吧。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn