border三角

2013.09.25 2076 人浏览 留言

isay页面左侧三角符号在html5下用css的border属性替换背景图

其实就是用after和before属性 然后做2个三角形,底下的三角颜色和背景色一样,上面的小三角颜色设成边距颜色,然后适当调整位置即可

.status .fr:before, .status .fr:after {position: absolute;content: "";left: -16px;top: 13px;width: 0;z-index: 99;border: solid rgba(156, 66, 66, 0);}
.status .fr:before{border-color:rgba(255,255,255,0);border-right-color:#F5F5F5;border-width:8px;z-index:100}
.status .fr:after {border-color: rgba(255,255,255,0);border-right-color: #BDBDBD;border-width: 9px;left: -19px;top: 12px;}

文章地址:https://huilang.me/isay/border-triangle/

回复本文

您的电子邮箱地址不会被公开。 必填项已用 * 标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif