|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
純CSS實(shí)現(xiàn)：箭頭+圓角方形提示框tooltip
作者:admin 時(shí)間:2022-8-3 18:35:33 瀏覽:本文介紹一個(gè)箭頭+圓角方形提示框tooltip，它是純CSS實(shí)現(xiàn)的，樣式容易自定義，使用起來(lái)非常方便。
完整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:
/* 調(diào)整第一個(gè)二次曲線漸變的角度以控制形狀 */
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實(shí)現(xiàn)：箭頭+圓角方形提示框<br>純CSS實(shí)現(xiàn)：箭頭+圓角方形提示框<br>純CSS實(shí)現(xiàn)：箭頭+圓角方形提示框<br>純CSS實(shí)現(xiàn)：箭頭+圓角方形提示框<br>純CSS實(shí)現(xiàn)：箭頭+圓角方形提示框</p>
</body>
</html>
相關(guān)文章
相關(guān)文章
x
- 站長(zhǎng)推薦
