专业二维码网站建设,用node.js可以做网站吗,怎么设计门户网站,做静态网站有什么建议因为最近看到别人写的不错的样式#xff0c;所以就想自己实现#xff0c;但是呢用到了一个三角形#xff0c;所以稍微研究一下。效果是这样的#xff1a;注意是下边那个浅色三角#xff0c;感觉书签的效果有木有。看着很有层次感。接下来就是实现了#xff0c;利用border… 因为最近看到别人写的不错的样式所以就想自己实现但是呢用到了一个三角形所以稍微研究一下。效果是这样的注意是下边那个浅色三角感觉书签的效果有木有。看着很有层次感。接下来就是实现了利用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标签的话div classone日志 div classtriangle/div/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;}div classone日志/div等我写好了截图放回来 转载于:https://blog.51cto.com/wangyiehng/1845240
