技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯CSS实现:箭头+圆角方形提示框tooltip

作者:admin    时间:2022-8-3 18:35:33    浏览:

本文介绍一个箭头+圆角方形提示框tooltip,它是纯CSS实现的,样式容易自定义,使用起来非常方便。

 纯CSS实现:箭头+圆角方形提示框tooltip

完整HTML代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  
<style>
.tooltip {
  --r: 30px; /* 半径 */
  --h: 50px; /* 尾高 */
  --p: 30%;  /* 尾位置 */

  padding: var(--r);
  border: var(--h) solid #0000;
  border-radius: calc(var(--r) + var(--h));
  --m:
    /* 调整第一个二次曲线渐变的角度以控制形状 */
    conic-gradient(from 30deg at var(--p) 100%,
        #0000, red 1deg 30deg, #0000 31deg)
      0 100%/ 100% var(--h) no-repeat border-box, 
    conic-gradient(red 0 0) padding-box;
  -webkit-mask: var(--m);
          mask: var(--m);
  
  margin: 50px auto; /* 图形位置 */
  max-width: 320px; /* 图形宽 */
  font: 600 1.25em/ 1.375 indie flower, purisa;
  background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
  color: #fff
}
</style>


</head>

<body>
  <p class="tooltip">纯CSS实现:箭头+圆角方形提示框<br>纯CSS实现:箭头+圆角方形提示框<br>纯CSS实现:箭头+圆角方形提示框<br>纯CSS实现:箭头+圆角方形提示框<br>纯CSS实现:箭头+圆角方形提示框</p>
</body>

</html>

demodownload

相关文章

标签: Tooltips  工具提示  
x
x
  • 站长推荐