原码笔记

原码笔记

使用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实现三角符号效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

标签: 使用 实现 效果