<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Pure CSS corner ribbon</title>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Lato:700);
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
}
.box {
position: relative;
max-width: 600px;
width: 90%;
height: 400px;
background: #fff;
box-shadow: 0 0 15px rgba(0,0,0,.1);
}
/* common */
.ribbon {
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
}
.ribbon::before,
.ribbon::after {
position: absolute;
z-index: -1;
content: '';
display: block;
border: 5px solid #2980b9;
}
.ribbon span {
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
color: #fff;
font: 700 18px/1 'Lato', sans-serif;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
text-transform: uppercase;
text-align: center;
}
/* top left*/
.ribbon-top-left {
top: -10px;
left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
border-top-color: transparent;
border-left-color: transparent;
}
.ribbon-top-left::before {
top: 0;
right: 0;
}
.ribbon-top-left::after {
bottom: 0;
left: 0;
}
.ribbon-top-left span {
right: -25px;
top: 30px;
transform: rotate(-45deg);
}
/* top right*/
.ribbon-top-right {
top: -10px;
right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
border-top-color: transparent;
border-right-color: transparent;
}
.ribbon-top-right::before {
top: 0;
left: 0;
}
.ribbon-top-right::after {
bottom: 0;
right: 0;
}
.ribbon-top-right span {
left: -25px;
top: 30px;
transform: rotate(45deg);
}
/* bottom left*/
.ribbon-bottom-left {
bottom: -10px;
left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
border-bottom-color: transparent;
border-left-color: transparent;
}
.ribbon-bottom-left::before {
bottom: 0;
right: 0;
}
.ribbon-bottom-left::after {
top: 0;
left: 0;
}
.ribbon-bottom-left span {
right: -25px;
bottom: 30px;
transform: rotate(225deg);
}
/* bottom right*/
.ribbon-bottom-right {
bottom: -10px;
right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
border-bottom-color: transparent;
border-right-color: transparent;
}
.ribbon-bottom-right::before {
bottom: 0;
left: 0;
}
.ribbon-bottom-right::after {
top: 0;
right: 0;
}
.ribbon-bottom-right span {
left: -25px;
bottom: 30px;
transform: rotate(-225deg);
}
</style>
</head>
<body>
<div class="box">
<div class="ribbon ribbon-top-left"><span>ribbon</span></div>
<div class="ribbon ribbon-top-right"><span>ribbon</span></div>
<div class="ribbon ribbon-bottom-left"><span>ribbon</span></div>
<div class="ribbon ribbon-bottom-right"><span>ribbon</span></div>
</div>
</body>
</html>

css设计丝带的更多相关文章

  1. 《CSS 设计指南》学习笔记 一

    本篇文章是对这几天看完 Charles Wyke-Smit 的 <CSS 设计指南> 后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己 ...

  2. CSS设计指南之理解盒子模型

    原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...

  3. CSS设计指南之浮动与清除

    原文:CSS设计指南之浮动与清除 浮动意思就是把元素从常规文档流中拿出来,浮动元素脱离了常规文档流之后,原来紧跟在其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐. 一.浮动 CSS设计 ...

  4. CSS设计指南之定位

    原文:CSS设计指南之定位 CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位.position属性有4个值:static.relative.ab ...

  5. 结构化CSS设计思维

    LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...

  6. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

  7. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  8. HTML & CSS设计与构建网站 ([美]达科特) PDF原版​

    HTML & CSS 设计与构建网站采用有别于许多传统编程书籍的新颖编排方式,将使您收到事半功倍的学习效果.每一页都在短小精悍的示例代码的引导下,简明直观.直截了当地阐述一个新主题. < ...

  9. （11）用css设计电子相册 {上}

    本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...

随机推荐

  1. Codeforces 191C (LCA+树上差分算法)

    题面 传送门 题目大意: 给出一棵树,再给出k条树上的简单路径,求每条边被不同的路径覆盖了多少次 分析 解决这个问题的经典做法是树上差分算法 它的思想是把"区间"修改转化为左右端点 ...

  2. 开发一个 Parcel-vue 脚手架工具

    前言 像我们熟悉的 vue-cli,create-react-app 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我 ...

  3. SQL 中的正则函数

    ORACLE中支持正则表达式的函数主要有下面四个: 1,REGEXP_LIKE :与LIKE的功能相似,比LIKE强大得多. 2,REGEXP_INSTR :与INSTR的功能相似. 3,REGEXP ...

  4. 深入理解js闭包【写的通俗易懂，很值的阅读】

    详细内容在下面这个链接里面: https://www.cnblogs.com/uedt/archive/2010/10/28/1863389.html 能写出这样的文章,定是大佬!

  5. mssql 取数据指定条数（例：100-200条的数据）

    方法1:临时表 * into #aa from table order by time-- 将top m笔插入 临时表 select * from #aa order by time desc --d ...

  6. PyCharm使用技巧总结

    PyCharm高频使用快捷键 快速修复:ALT + ENTER 搜索: 双击Shif 垂直分隔窗口: ALT + V 另起一行: SHIFT + ENTER 删除当前插入符所在的行: Ctrl + Y ...

  7. SSM中前台传数组。后台接受的问题

    当时写得时候,忘记考虑json的jar,做个记录. 第一步:先带入jar <dependency> <groupId>com.fasterxml.jackson.core< ...

  8. Ts 的类

    TS 中的公共.私有和受保护的修饰符: 1.public表示公共的,用来指定在创建实例后可以通过实例访问的,也就是类定义的外部可以访问的属性和方法.默认是 public 2.private修饰符表示私 ...

  9. 三、MyBatis-全局配置文件

    XML 映射配置文件(官方结构) MyBatis 的配置文件包含了会深深影响 MyBatis 行为的设置(settings)和属性(properties)信息.文档的顶层结构如下: configura ...

  10. html 头部设置

    https://juejin.im/post/5a4ae29b6fb9a04504083cac <head> <meta charset="UTF-8"> ...