【CSS左右上角斜标签】CSS实现左右上角飘带功能,左右上角斜标签(附源码)


文章目录

  • 写在前面
  • 涉及知识点
  • 实现效果
  • 1、实现过程
    • 1.1左上角飘带
      • Html代码
      • Css代码
      • 效果
    • 1.2右上角飘带
      • Html代码
      • Css代码
      • 效果
  • 2、源码分享
    • 2.1 百度网盘
    • 2.2 123网盘
    • 2.3 邮箱留言
  • 总结


写在前面

其实在公司页面开发过程就遇到过,需要在方块右上角展示一个斜的文字或者告警数目,我实现的效果就是类似下面这样的图形,有个推荐标签,但是当时年轻实现起来的方式贴别的笨重,我是用了一个相对定位,然后设置图片背景色的方式,但是如果想改上面文字的话需要重新整图片。今天我就带大家重新认识CSS,看看它的功能之强大,也就是不用设置背景图也能实现左右上飘带功能。

涉及知识点

CSS实现左上角飘带效果,CSS实现右上角飘带效果,CSS实现左上角斜标签效果,CSS实现右上角斜标签效果,纯CSS实现标签效果展示。
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

实现效果

【CSS左右上角斜标签】CSS实现左右上角飘带功能,左右上角斜标签(附源码)_第1张图片

1、实现过程

1.1左上角飘带

首先我们创建一个div容器,然后创建一个子节点,将飘带效果放在子节点上面。
其实这样说大家都会说,我说下这个实现的核心,首先我们创建这样的结构是很简单的,如下所示:
【CSS左右上角斜标签】CSS实现左右上角飘带功能,左右上角斜标签(附源码)_第2张图片

只要创建好父子节点,然后设置相对便宜量即可,但是我们要实现的效果是斜的在左上角,那么我们换个思维去想,要是能对子节点进行整体角度的旋转45度就可以,如下图所示:
【CSS左右上角斜标签】CSS实现左右上角飘带功能,左右上角斜标签(附源码)_第3张图片

最后我们再挪一个角度,设置父节点overflow隐藏属性即可实现我们想要的效果
如下所示源码与效果:

Html代码

<div class="partdom">
    <div class="father father1">
        <div class="son1">
            <span>今日推荐span>
        div>
    div>
div>
<div class="partdom">
    <div class="father father1">
        <div class="son2">
            <span>黄大大帅span>
        div>
    div>
div>

Css代码

.partdom {
    width: 200px;
    height: 200px;
    background-color: #fff;
    margin: 10px;
    float: left;
}

.father {
    width: 100%;
    height: 100%;
    color: red;
    background-color: #dbd2ce;
}

.father1 {
    /* 最外层的div容器 */
    min-width: 200px;
    min-height: 200px;
    text-align: center;
    position: relative;
    /* 父元素相对定位 */
    overflow: hidden;
    border: 1px solid #F3F3F3;
    /* 边框 */
    background-color: #3EA1FF36;
    /* 背景颜色 */
}

.son1 {
    /* 左上角飘带 */
    background-color: #1890FF;
    /* 左上角飘带的背景颜色 */
    overflow: hidden;
    white-space: nowrap;
    /* 文字不换行*/
    position: absolute;
    /* 绝对定位 */
    left: -45px;
    top: 20px;
    transform: rotate(-45deg);
    /* 旋转45°*/
    box-shadow: 0 0 10px #888;
    /* 飘带的阴影*/
}

.son1 span {
    border: 1px solid #1890FF;
    color: #fff;
    display: block;
    font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 1px 0;
    padding: 5px 50px;
    text-align: center;
    text-shadow: 0 0 5px #444;
}

.son2 {
    /* 左上角飘带 */
    background-color: #FF7F27;
    /* 左上角飘带的背景颜色 */
    overflow: hidden;
    white-space: nowrap;
    /* 文字不换行*/
    position: absolute;
    /* 绝对定位 */
    left: -54px;
    top: -8px;
    transform: rotate(-45deg);
    /* 旋转45°*/
    box-shadow: 0 0 10px #888;
    /* 飘带的阴影*/
}

.son2 span {
    border: 1px solid #FF7F27;
    color: #fff;
    display: block;
    font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 1px 0;
    padding: 20px 50px;
    text-align: center;
    text-shadow: 0 0 5px #444;
}

效果

【CSS左右上角斜标签】CSS实现左右上角飘带功能,左右上角斜标签(附源码)_第4张图片

1.2右上角飘带

其实右上角和左上角概念是一样的,我们只是转个方向,这里实现过程同1.1,我就不进行过多的描述了。

Html代码

<div class="partdom">
    <div class="father father1">
        <div class="son3">
            <span>清仓立减span>
        div>
    div>
div>
<div class="partdom">
    <div class="father father1">
        <div class="son4">
            <span>明日上新span>
        div>
    div>
div>

Css代码

.son3 {
    /* 左上角飘带 */
    background-color: #df493f;
    /* 左上角飘带的背景颜色 */
    overflow: hidden;
    white-space: nowrap;
    /* 文字不换行*/
    position: absolute;
    /* 绝对定位 */
    right: -54px;
    top: -8px;
    transform: rotate(45deg);
    /* 旋转45°*/
    box-shadow: 0 0 10px #888;
    /* 飘带的阴影*/
}

.son3 span {
    border: 1px solid #df493f;
    color: #fff;
    display: block;
    font: bold 12px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 1px 0;
    padding: 20px 50px;
    text-align: center;
    text-shadow: 0 0 5px #444;
}

.son4 {
    /* 左上角飘带 */
    background-color: #1890FF;
    /* 左上角飘带的背景颜色 */
    overflow: hidden;
    white-space: nowrap;
    /* 文字不换行*/
    position: absolute;
    /* 绝对定位 */
    right: -45px;
    top: 20px;
    transform: rotate(45deg);
    /* 旋转45°*/
    box-shadow: 0 0 10px #888;
    /* 飘带的阴影*/
}

.son4 span {
    border: 1px solid #1890FF;
    color: #fff;
    display: block;
    font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 1px 0;
    padding: 5px 50px;
    text-align: center;
    text-shadow: 0 0 5px #444;
}

效果

【CSS左右上角斜标签】CSS实现左右上角飘带功能,左右上角斜标签(附源码)_第5张图片

2、源码分享

2.1 百度网盘

链接:https://pan.baidu.com/s/1rWjXpm24WJs9_uars6QPsw
提取码:hdd6

2.2 123网盘

链接:https://www.123pan.com/s/ZxkUVv-HwI4.html
提取码:hdd6

2.3 邮箱留言

评论区留下您的邮箱账号,博主看到第一时间发给您,祝您生活愉快!


总结

以上就是今天要讲的内容,本文主要介绍了CSS实现左上角飘带效果,CSS实现右上角飘带效果,CSS实现左上角斜标签效果,CSS实现右上角斜标签效果,纯CSS实现标签效果展示,也期待大家一起进步哈,2023年一起加油!!!

版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

你可能感兴趣的:(CSS,前端开发,web页面开发-源码demo,前端,css)