.ribbon {
background: #45c9c8;
position: absolute;
width: 75px;
height: 25px;
line-height: 25px;
top: -4px;
left: -11px;
font-size: 14px;
color: #fff;
text-align: center;
font-style: normal;
z-index: 1;
&:after{
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-top: 5px solid #329c9b;
top: 25px;
left: 0px;
z-index: 0;
}
&:before{
content: "";
position: absolute;
right: -10px;
font-size: 14px;
color: #fff;
z-index: 1;
width: 0;
height: 0;
border-top: 13.5px solid #45c9c8;
border-left: 5px solid #45c9c8;
border-right: 10px solid transparent;
border-bottom: 12.5px solid #45c9c8;
}
}

  利用伪选择器after和before写了一个丝带标签

CSS3 border属性的妙用的更多相关文章

  1. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  2. CSS3:不可思议的border属性&Web字体图标Font Awesome

     CSS3:不可思议的border属性 转载至——译文:不可思议的CSS border属性 原文:Magic of CSS border property Web字体图标Font Awesome 转载 ...

  3. border属性妙用

    以前只知道border属性是盒模型中的边框属性,一直不清楚每个边的border是矩形拼接有重合呢,还是梯形无缝拼接的. border梯形 为了观察边框究竟是哪一种拼接方式,为边框设置不同的颜色背景,代 ...

  4. CSS3:不可思议的border属性

    在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替.但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧. 1.正三 ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  6. 使用CSS3各个属性实现小人的动画

    使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...

  7. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. border-radius 样式表CSS3圆角属性

    border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...

  9. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

随机推荐

  1. 电子科大POJ "任意阶矩阵相乘"

    任意阶矩阵的乘法 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) C-sourc ...

  2. java PriorityBlockingQueue 基于优先级队列,的读出操作可以阻止.

    java PriorityBlockingQueue 基于优先级队列.的读出操作可以阻止. package org.rui.thread.newc; import java.util.ArrayLis ...

  3. 数据结构 B树、B-树、B+树、B*概念

    B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...

  4. PropertyGrid--基本功能

    一.引言 PropertyGrid是Visual Studio中新增的控件,顾名思义,其主要是用来显示和设置某一(或多个)对象的属性值的.其具体的实现主要是基于.Net中强大的反射机制.Propert ...

  5. JavaScript事件处理程序 学习笔记

    我一直认为Javascript的特点就是在和用户交互的过程中可以进行一些操作,那么事件作为用户交互的主要部分就显得特别重要,今天先学习了JS事件处理程序的相关内容. 首先,要明白Javascript ...

  6. python基础:测量python代码的运行时间

    Python社区有句俗语:“python自己带着电池” ,别自己写计时框架.Python 2.3 具备一个叫做 timeit 的完美计时工具可以测量python代码的运行时间. timeit模块 ti ...

  7. Scala基础入门-3

    学习Scala——映射和元组 映射和和元组,也就是Maps和Tuples.Map这东西应该都挺明白的,就是键值对的集合.而元组,tuple,这东西并不是每个语言都有(Python中是有的,不过当时学的 ...

  8. Android 相对布局常用属性

    Android 布局属性详解 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false     android:layout_centerHrizontal  水平居中 ...

  9. 05-3. 求a的连续和(15)

    输入两个整数a和n,a的范围是[0,9],n的范围是[1,8],求数列之和S = a+aa+aaa+...+aaa...a(n个a). 如a为2.n为8时输出的是2+22+222+...+222222 ...

  10. 在Linux上怎么安装和配置DenyHosts工具

    使用DenyHosts能够进行自动屏ip的功能,掌握DenyHosts在Linux系统中的安装是很有必要的,那么在Linux系统中要如何安装DenyHosts工具呢?安装后又要如何配置呢?这都是用户需 ...