html写下三角,html文字下方小三角的实现方法

标签：

效果如图：

文字下有一个小三角，看起来美观小巧但是实现起来有点让人摸不到头脑，这里有两种方法实现，当然有人有更好的办法可以留言补充。

把块元素的长宽设为0再加下边线可以实现：

这种是常用的方法，网上很多，先用代码举个栗子：

.div{

width: 0;

height: 0;

border: 10px solid transparent;

border-bottom-color:white;

position: absolute;

left: 115px;

bottom: 100%;

margin-top: 20px;

}

如果这个元素设为div等块元素,先把长宽取消即

width: 0;

height: 0;

设置边框即三角形的大小通过调整border的值实现(这里先把颜色设置成透明,我们只要下边框)：

border: 10px solid transparent;

设置三角的颜色通过设置border的bottom-color值实现：

border-bottom-color: white;

最后调整三角形位置

position: absolute;

left: 115px;

bottom: 100%;

margin-top: 20px;

插入背景图片法实现：

这种方法适合于行内元素比如

• 中
• 等文字行内元素设置下三角，

  因为这种元素用第一种方法强行设置宽高等于0会导致字的重叠无法正常显示，

  所以我们有一个简单粗暴的方法，那就是直接插入背景图片background-image:url(xx.jpg);

  不知道大家看了啥感受反正我第一次见的时候惊呆了，竟然还有这种操作，不过简单有效，

  最开始的图片就是这种方法完成的

  代码不贴了，因为实在没啥可写的,直接找到背景图片

  给文字元素的CSS加background-image:url(xx.jpg);就搞定了

  不过图片的调整比较麻烦，因为比较菜直接用画图搞定的......

  例子的背景图是这样的

  

  虽然粗暴不过真的好用,欢迎大家补充！

  标签：

  来源： https://blog.csdn.net/q5706503/article/details/82797227