css 11种方式完成1个tips带有描边的小箭头

日期:2020-09-30 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

大家在网页页面开发设计中完成1个tips时会有1个小箭头,完成这类方式的文章内容在网上早已泛滥成灾了,但有时完成这个小箭头不止仅有单纯性的3角它也有描边,今日大家就借那些现有的文章内容在深层次1点来讲说怎样给tips小箭头描边,本章不涉及到svg/canvas,没必要由于我讲的是css。

行为主体款式:

<div class="dui-tips"><a href="http://www.w3cbest.com">w3cbest我是1个tips</a></div>
 .dui-tips{
        position: relative;
        padding: 10px;
        text-align: center;
        border: 1px solid #f60;
        border-radius: 5px;
        background-color: #fff;
    }

第1种border描边两层遮盖:

便是大伙儿常见的border,完成基本原理便是给在其中1条边设定色调宽度及款式,我这里应用了两个伪类开展折叠,将1个白色的遮盖在有色调的伪类上面,再偏位1px来仿真模拟完成1px的描边实际效果,编码以下:

.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: '';
        transform: translate(⑸0%, 0);
        border-width: 10px 10px 0 10px;
        border-style: solid;
    }
    &:before {
        z-index: 0;
        bottom: ⑴0px;
        border-color: #f60 transparent transparent transparent;
    }
    &:after {
        z-index: 1;
        bottom: ⑻px;
        border-color: #fff transparent transparent transparent;
    }
}

第2种border描边融合滤镜drop-shadow特性:

第2种是第1种的拓宽,应用滤镜filter的drop-shadow描边来完成,box-shadow和drop-shadow完成不规律投射

.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: '';
        transform: translate(⑸0%, 0);
        border-width: 10px 10px 0 10px;
        border-style: solid;

        bottom: ⑼px;
        border-color: #fff transparent transparent transparent;
        filter: drop-shadow(0px 2px 0px #f60);
    }
}

第3种根据独特标记或字体样式两层遮盖

第3种方式和第1类型似,根据双层色调叠加在有等级的偏位来完成

.dui-tips {
    &:before, &:after {
        font-size: 24px;
        line-height: 18px;
        position: absolute;
        left: 50%;
        display: table;
        content: '◆';
        transform: translate(⑸0%, 0);
        text-align: center;
    }
    &:before {
        z-index: 0;
        bottom: ⑴0px;
        color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: ⑻px;
        color: #fff;
    }
}

第4种根据text-shadow完成

这类放发根据给文子设定1px的黑影来显描边实际效果

.dui-tips {
    &:after {
        font-size: 24px;
        line-height: 18px;
        position: absolute;
        left: 50%;
        display: table;
        content: '◆';
        transform: translate(⑸0%, 0);
        text-align: center;

        z-index: 1;
        bottom: ⑻px;
        color: #fff;
        text-shadow: 0 2px 0 #f60;
    }
}

第5种 background两层遮盖

这类方法设定两个宽度和高宽比各自为10px的方块情况,再给双层情况各自设定不一样的色调,再根据双层情况色调叠加,历经等级偏位再有transform的rotate特性转动角度,来完成箭头的房屋朝向。

.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: ⑸px;
        transform: rotate(⑷5deg);
    }
    &:before {
        z-index: 0;
        bottom: ⑹px;
        background-color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: ⑸px;
        background-color: #fff;
    }
}

第6种background和border情况描边转动

此方式便是设定1个宽度和高宽比各自为10px的方块情况,随后情况邻近的两条边描边再有transform的rotate特性转动角度,来完成箭头的房屋朝向。

.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        margin-left: ⑸px;
        content: '';
        transform: rotate(⑷5deg);

        z-index: 1;
        bottom: ⑹px;
        border-bottom: 1px solid #f60;
        border-left: 1px solid #f60;
        background-color: #fff;
    }
}

第7种background和box-shadow

.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: ⑸px;
        transform: rotate(⑷5deg);

        z-index: 1;
        bottom: ⑸px;
        background-color: #fff;
        box-shadow: ⑴px 1px 0 #f60;
    }
}

第8种linear-gradient

.dui-tips{
    &:before, &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: ⑸px;
        transform: rotate(⑴35deg);
    }
    &:before {
        z-index: 0;
        bottom: ⑹px;
        background: linear-gradient(⑷5deg, transparent 7px, #f60 0);
    }
    &:after {
        z-index: 1;
        bottom: ⑸px;
        background: linear-gradient(⑷5deg, transparent 7px, #fff 0);
    }
}

第9种linear-gradient和box-shadow

.dui-tips{
    &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: ⑸px;
        transform: rotate(⑴35deg);

        z-index: 1;
        bottom: ⑸px;
        background: linear-gradient(⑷5deg, transparent 7px, #fff 0);
        box-shadow: ⑴px ⑴px 0 #f60
    }
}

第10种linear-gradient和border

.dui-tips{
    &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: '';
        margin-left: ⑸px;
        transform: rotate(⑴35deg);

        z-index: 1;
        bottom: ⑹px;
        background: linear-gradient(⑷5deg, transparent 7px, #fff 0);
        border-top: 1px solid #f60;
        border-left: 1px solid #f60;
    }
}

第101种ouline

.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: '';
        transform: rotate(45deg);
        outline-style: solid;
        outline-width: 5px;
    }
    &:before {
        z-index: 0;
        bottom: ⑴px;
        outline-color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: 0;
        outline-color: #fff;
    }
}

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