十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
因为最近看到别人写的不错的样式,所以就想自己实现,但是呢用到了一个三角形,所以稍微研究一下。
沙坡头网站建设公司成都创新互联公司,沙坡头网站设计制作,有大型网站制作公司丰富经验。已为沙坡头成百上千提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的沙坡头做网站的公司定做!效果是这样的:
注意是下边那个浅色三角,感觉书签的效果有木有。看着很有层次感。
接下来就是实现了,利用border这个属性。
这里的话主要是 border-top、border-left、border-right、border-bottom 可以在css手册中查到(http://css.doyoe.com/)
先拉个空白写吧,我把几个属性都写上。
code:
.triangle{ width:0; height:0; border-top:10px solid #000; border-left:10px solid #000; border-right:10px solid #000; border-bottom:10px solid #000; }
然后结果就是在屏幕上得到一个正方形的小黑块。
接下来就是实现三角了,需要使用transparent这个参数,这个参数是使颜色透明。
code:
.triangle{ width:0; height:0; border-top:10px solid #000; border-left:10px solid #000; border-right:10px solid #000; border-bottom:10px solid transparent; }
效果:(有没有书签的感觉?这里可以更改top的值,加长!)
那现在我们需要的就是给left也加上一个transparent就可以了,但是注意一点,这个时候top和right的修改影响这个三角的大小,比如我们去掉一项,可以看效果。
效果如上。这个时候与别人效果基本相似了,现在只需要把颜色切换就可以了。(#7195B7)
然后我们回到开始的那个demo,这样效果呢,肯定要用到position定位了,然后把它定在下边!考虑吧如果再写个div标签的话
日志
效果的话有兴趣的各位可以试试。
还有一种是利用::after;然后里边写定位
one::after{ content: ""; width:0; height:0; border-top:10px solid #000; border-left:10px solid #000; border-right:10px solid #000; border-bottom:10px solid transparent; }
日志
等我写好了截图放回来!
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。