原码笔记

原码笔记

使用css实现三角符号效果

小诸哥 0

关于使用css制作三角符号，网上有很多的例子了，在这里只是为了详细的向各位解释一下三角符号的原理

下图，是一个长宽为100px，边框宽度为100px的一个元素，由此可见，在css中上下左右的边框相交处并不是一个直线，所以，可以根据此属性进行编写三角符号

那么如何使用css的该属性来实现三角符号的效果呢，代码如下：

html代码

  1. <body>
  2.      <div></div>
  3. </body>

css代码

  1. div:after{
  2.      position: absolute;
  3.      width: 0px;
  4.      height: 0px;
  5.      content: " ";
  6.      border-right: 100px solid transparent;
  7.      border-top: 100px solid #ff0;
  8.      border-left: 100px solid transparent;
  9.      border-bottom: 100px solid transparent;
  10. }

效果图：

这种方法是使用的伪类来实现的三角符号，然后使用绝对定位，不会占用空间

transparent是透明色，大家如果想要的三角符号的方向不一样，只需将对应方向的边框颜色加上，其他的改为透明色即可
 

推荐：

感兴趣的朋友可以关注小编的微信公众号【码农那点事儿】，更多网页制作特效源码及学习干货哦！！！

总结

以上所述是小编给大家介绍的使用css实现三角符号效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

标签： 使用 实现 效果

赏
版权声明：本站所有图片/内容除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！

上一篇css不常见属性之pointer-events的使用方法

下一篇CSS实现反方向圆角的示例代码

相关文章