代码:

css实现指针效果

效果:

css实现指针效果

基本思路:

1.设置元素的高度为0(指针的高度从border-bottom开始计算)

2.设置指针的宽度

3.设置border-bottom(指针的高度由该属性的宽度决定,颜色有该元素的背景色决定)

4.设置border-left,border-right

由于width = content+padding+border,现在padding为0,

所以整个指针的宽度=content+border-left+border-right。

也就说:当border-left,border-right宽度变化时,content也在变化,但总体的宽度没变。

这样就会从上到下产生一个斜边。

转载于:https://blog.51cto.com/gaochongid/978404

相关文章:

  • 2021-09-16
  • 2021-12-10
  • 2021-07-22
  • 2021-06-13
  • 2021-05-21
  • 2021-10-03
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-11-29
  • 2021-12-10
  • 2022-12-23
  • 2021-12-29
  • 2021-07-05
  • 2021-06-23
  • 2021-11-08
相关资源
相似解决方案