css制做tips提醒框,气泡框,制做3角形的完成

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

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

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

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

当大家给1个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;
   }

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

当大家把盒子的 宽度和高宽比变成0 的情况下,4条边框就会从管理中心点考虑,变为4个3角形。

.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;
   }

这样,当大家只必须1个3角形的情况下,要是把其他边框色调设为全透明色就行了。比如大家只保存朝上的3角形

.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;
   }

了解了如何制做3角形,大家便可以运用伪类,用肯定精准定位的方法,制做1个气泡框,比如

.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:⑷0px;
        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;
   }


<p class="container">
    hi,这篇文章内容要教大伙儿如何应用css制做气泡框。
</p>

简易的气泡框就制做好了。3角形的样子,大伙儿能够依据具体的要求去拼接。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。