游客

标题:[分享]利用:after+border画纯css三角
正文:
网页素材：显示三角图标的方式有很多，譬如：图片、符号△▲；用纯css的方式，怎么显示三角呢？ 三角要怎么用才能美观呢？本站之前的一篇纯css的标签背景就是一个很好的应用方式。 那么本文主要介绍这种纯css显示三角的原理。先看一下一个简单例子的效果：HTML代码： CSS代码：span{border: 10px solid transparent; border-bottom: 11px solid #000; border-top: none;}这里就是用纯border显示的向上的三角，我们可以看到，先透明border，然后一个底边，去掉顶部的border。 那么向右的箭头怎么写呢？ border: 10px solid transparent; border-left: 11px solid #000; border-right: none;display:block; 注意此处display:block；同理，向左的箭头和向下的箭头，你应该也知道了吧。然后看一下三角的应用效果： HTML代码： Issue15CSS代码：.issue { position: absolute; top: 0; right: 90px; width: 48px; height: 58px; font-family: Georgia; background: #649F0C; text-align: center; font-size: 15px; line-height: 1.2; padding-top:6px;}.issue:after { content: ''; &nbs
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页