无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

css制作tips提醒框,汽泡框,制作三角形的完成

时间:2021-04-02 00:19来源:未知 作者:jianzhan 点击:
有时候候大家的网页页面会必须那样的一些提醒框或是叫汽泡框,应用css,大家能够完成那样的实际效果。以便完成上边的实际效果,大家最先要了解怎样制作三角形。当我们们给一个

有时候候大家的网页页面会必须那样的一些提醒框或是叫汽泡框,应用css,大家能够完成那样的实际效果。

以便完成上边的实际效果,大家最先要了解怎样制作三角形。

当我们们给一个DIV不一样色调的外框的情况下,大家能够获得下边的实际效果。

.triangle{
 border-top:20px solid red;
 width:50px;
 height:50px;
 border-right:20px solid blue; 
 border-bottom:20px solid gray; 
 border-left:20px solid green;
 }

能看到,四条外框变为了 梯形 的样子,而并不是大家认为的长正方形样子。

当我们们把小盒子的 总宽和高宽比变成0 的情况下,四条外框便会从这当中心触发发,变为4个三角形。

.triangle{
 border-top:20px solid red;
 width:0px;
 height:0px;
 border-right:20px solid blue; 
 border-bottom:20px solid gray; 
 border-left:20px solid green;
 }

那样,当我们们只必须一个三角形的情况下,要是把其他外框色调设成全透明色就行了。比如大家只保存朝上的三角形

.triangle{
 border-top:20px solid transparent;
 width:0px;
 height:0px;
 border-right:20px solid transparent; 
 border-bottom:20px solid gray; 
 border-left:20px solid transparent;
 }

了解了如何制作三角形,大家便可以运用伪类,用肯定精准定位的方法,制作一个汽泡框,比如

.container{
 position:relative;
 margin-top:50px;
 padding:6px 12px;
 color:#fff;
 font-size:16px;
 line-height:25px;
 width:200px;
 height:50px;
 background-color:orange;
 border-radius:4px; 
 p.container:after{
 position:absolute;
 top:-40px;
 right:20px;
 border-top:20px solid transparent;
 content:" "; // content 不必漏了,漏了会显示信息出不来来
 width:0px;
 height:0px;
 border-right:20px solid transparent; 
 border-bottom:20px solid orange; 
 border-left:20px solid transparent;

简易的汽泡框就制作好啦。三角形的样子,大伙儿能够依据具体的要求去拼凑。

之上便是文中的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用诺心互联网。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信