纯CSS完成箭头、气泡让提醒作用具备3角形标志

日期:2021-03-09 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

演试详细地址:CSS Triangles Demo
本文两种完成方法: 应用或不应用 before 和 :after 伪元素(伪类,pseudo-elements)

近期再次设计方案了我的网站,提前准备加上tooltips提醒信息内容实际效果.完成很非常容易,但我要想让提醒作用具备3角形的标示标志。
当我再次思索要想所设计方案的每一个标志色调都无拘无束的情况下,选用照片那便是1场灾祸。
好运的是, MooTools 的关键开发设计者 Darren Waddell详细介绍了1个强劲的技能给我:CSS3角形.只应用纯CSS語言,你就可以建立适配各个访问器的3角形,用非常少的编码。

不应用伪类的 CSS 编码以下:

拷贝编码
编码以下:

/* 向上的箭头,相近于A,仅有3个边,不可以特定上边框 */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左侧框的宽 */
border-right: 5px solid transparent; /* 右侧框的宽 */
border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,和情况色 */
font-size: 0;
line-height: 0;}
/* 向下的箭头 相近于 V */
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
/* 向左的箭头: 仅有3个边:上、下、右。而 <| 整体看来,向左3角形的高=上+下边框的长度。 宽=右侧框的长度 */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的高 */
border-top: 15px solid transparent; /* 上方边框的高 */
border-right: 10px solid yellow; /* 右侧框的长度|宽度,和情况色 */
font-size: 0;
line-height: 0;
}
/* 向右的箭头: 仅有3个边:上、下、左。而 |> 整体看来,向右3角形的高=上+下边框的长度。 宽=左侧框的长度 */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的高 */
border-top: 15px solid transparent; /* 上方边框的高 */
border-left: 60px solid green; /* 左侧框的长度|宽度,和情况色 */
font-size: 0;
line-height: 0;
}

在其中的密秘,便是这些3角形在你要指向的方位竖直的两侧, 有极大的边框,而让反面的边框设定为你喜爱的色调便可。
边框越大,3角形就越大。调剂3个边框的长度,便可以搭建出各种各样不一样的3角形。假如再加转动,不知道道似的否能够特定各种各样不一样方位的图型?
自然,这个解决方式优异的地区就在于编码量十分少,另外十分灵便。

带有 :before 和 :after 的CSS3角形
前面的事例能够很好的工作中,可是假如你要想不只是1个3角形如何办?例如气泡会话框,那末可使用伪类来完成CSS3角形箭头,针对弹出的提醒信息内容来讲十分完善,编码以下:

拷贝编码
编码以下:

div.tooltip {
/* tooltip content styling in here; nothing to do with arrows */
}
/* shared with before and after */
div.tooltip:before, div.tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent; /* arrow size */
}
/* 向上的箭头 */
/* top-stacked, smaller arrow */
div.tooltip:before {
border-bottom-color: #fff; /* arrow color */
/* positioning */
position: absolute;
top: ⑴9px;
left: 255px;
z-index: 2;
}
/* arrow which acts as a background shadow */
div.tooltip:after {
border-bottom-color: #333; /* arrow color */
/* positioning */
position: absolute;
top: ⑵4px;
left: 255px;
z-index: 1;
}

1般来讲在箭头的反面边框特定色调,还可以只应用 :before 或 :after 当中的1个。而第2个箭头,能够被作为情况边框,或做为第1个的黑影。
我想问自身为何不早点了解这类技术性。这个雅致的技能毫无疑问会让我在未来大大的提升制做tooltip元素的水平,另外也为我开启了1个宽阔的视线。

详细的网页页面示例编码以下:

拷贝编码
编码以下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head> <title>CSS 箭头Demo</title>
<style type="text/css">
/* 向上的箭头,相近于A,仅有3个边,不可以特定上边框 */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左侧框的宽 */
border-right: 5px solid transparent; /* 右侧框的宽 */
border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,和情况色 */
font-size: 0;
line-height: 0;
}
/* 向下的箭头 相近于 V */
div.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
font-size: 0;
line-height: 0;
}
/* 向左的箭头: 仅有3个边:上、下、右。而 <| 整体看来,向左3角形的高=上+下边框的长度。 宽=右侧框的长度 */
div.arrow-left {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的高 */
border-top: 15px solid transparent; /* 上方边框的高 */
border-right: 10px solid yellow; /* 右侧框的长度|宽度,和情况色 */
font-size: 0;
line-height: 0;
}
/* 向右的箭头: 仅有3个边:上、下、左。而 |> 整体看来,向右3角形的高=上+下边框的长度。 宽=左侧框的长度 */
div.arrow-right {
width: 0;
height: 0;
border-bottom: 15px solid transparent; /* 下边框的高 */
border-top: 15px solid transparent; /* 上方边框的高 */
border-left: 60px solid green; /* 左侧框的长度|宽度,和情况色 */
font-size: 0;
line-height: 0;
}
/* 基础款式 */
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;
}
/* 箭头 - :before and :after, 1起构成了漂亮的气泡小箭头 */
.tip:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: ⑻px;
top: 20px;
content: '';
}
/* 情况黑影*/
.tip:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #eee;
border-bottom: 6px solid transparent;
left: ⑹px;
top: 21px;
content: '';
}
</style>
</head>
<body>
<div id="contentHolder">
<h1>CSS 箭头Demo</h1>
<p>下列编码.是极好的纯 CSS 箭头款式,不应用情况图!</p>
<div id="position:relative;">
<div class="arrow-up">向上的箭头</div>

<div class="arrow-down">向下的箭头</div>

<div class="arrow-left">向左的箭头</div>

<div class="arrow-right">向右的箭头</div>
</div>
<h2>CSS 箭头气泡 ,应用 伪类(Pseudo-Element)</h2>
<div style="position:relative;">
<div class="tip">
公司级开发设计首选技术性是甚么?JavaEE和.Net哪一个技术性更好?在JavaEE开发设计中关键用哪些架构?此外在挪动大热的发展趋势下怎样开发设计出1个取得成功的Android商品?
</div>
<br/>
<div class="tip">
向左的箭头: 仅有3个边:上、下、右。而 < | 整体看来,向左3角形的高=上+下边框的长度。 宽=右侧框的长度

向右的箭头: 仅有3个边:上、下、左。而 |> 整体看来,向右3角形的高=上+下边框的长度。 宽=左侧框的长度

向上的箭头,相近于A,仅有3个边,不可以特定上边框
</div>
</div>
</div>
</body>
</html>
上一篇:制作网页中后期如何提升权重值 返回下一篇:没有了