简述

上节分享了clip-path来实现一个剪切横幅，本节通过另外一种方式来实现一个更经典的横幅。

最终效果

我们先看一下最终要实现的效果。

我们要实现这样一个效果，首先需要将其进行上下分割，上面为一个红色背景右边有剪切三角且下边带阴影效果的样式，下面是一个黑色小三角。

为了实现这个效果，我们一步步分析，先从小三角入手。

小三角

为了更容易理解过程，将其拆分为以下几步。

效果

源码

下面我们实现一个<div>，其宽度为50px，边框为20px，这里为了凸显效果，左、上、右、下边框的颜色分别设置为红、绿、蓝、橙。

<!DOCTYPE html>

<html>

<head>

<style type='text/css'>

.bord {

  width: 50px;

  border: 20px solid #fff;

  border-left-color: red;

  border-top-color: green;

  border-right-color: blue;

  border-bottom-color: orange;

}

</style>

</head>

<body>

  <div class="bord">

  </div>

</body>

</html>

这个显然不满足我们三角的需求，好的我们再分析，小三角为上边框和右边框组合而成，但是由于宽度过大会造成不能均分，这时我们再进行一下设置。

看效果：

注意：这里只改动了这一处代码

.bord {

  width: 0px;

  ...

}

如果我们将左边框、下边框设置为透明，上边框、右边框设置会黑色不正好是我们想要的效果么。有点意思，我们不妨试试。

.bord {

  width: 0px;

  border: 20px solid #000;

  border-left-color: transparent;

  border-bottom-color: transparent;

}

是不是很喜人呢O(∩_∩)O~。

阴影分割

三角实现了，那么阴影分割可以参考上一节的实现。

效果

源码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type='text/css'>

.bord {

  position: relative;

  margin: 50px;

}

.bord:before {

  content: "青春不老，奋斗不止！纯正开源之美，有趣、好玩、靠谱。。。";

  position: absolute;

  color: #fff;

  font-weight: bold;

  height: 0px;

  border: 20px solid #a20000;

  /* 设置右边框透明 */

  border-right-color: transparent;

  line-height: 0px;

  box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.75);

  z-index: 1;

}

body {

  font-size: 13px;

}

</style>

</head>

<body>

  <div class="bord">

  </div>

</body>

</html>

这里主要说一下border-right-color: transparent。由于高度为0，边框为20px，所以这行样式和上面看到的一样将出现一个锯齿三角。

合并

将上面分别实现的两部分合并即可。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type='text/css'>

.bord {

  position: relative;

  margin: 50px

}

.bord:before {

  content: "青春不老，奋斗不止！纯正开源之美，有趣、好玩、靠谱。。。";

  position: absolute;

  /* 设置右内边距，防止文本显示不全 */

  padding-right: 15px;

  color: #fff;

  font-weight: bold;

  height: 0px;

  border: 20px solid #a20000;

  /* 设置右边框透明，实现剪切的三角 */

  border-right-color: transparent;

  line-height: 0px;

  box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.75);

  z-index: 1;

}

.bord:after {

  content: "";

  /* 设置距离上边缘的距离 */

  top: 40px;

  position: absolute;

  border: 4px solid #000;

  border-left-color: transparent;

  border-bottom-color: transparent;

}

body {

  font-size: 13px;

}

</style>

</head>

<body>

  <div class="bord">

  </div>

</body>

</html>

注意：

由于上部分的边框为20px，所以也就是说，高度为上下边框之和，即：40px，所以下面的小三角必须设置距离上边缘的距离top: 40px。否则，显示的位置就会出现错乱。

CSS之切出横幅的更多相关文章

  1. Android应用第一次安装成功点击“打开”后Home键切出应用后再点击桌面图标返回导致应用重启问题

    最近项目中遇到一个问题,用户第一次安装应用在系统的安装器安装完成界面有“完成”和“打开”两个按钮. 当用户点击“打开”按钮进入用户注册页面进行手机号验证码发送和验证码输入等操作界面,若此时用户点击Ho ...

  2. svn 切出指定版本、更改版本名称、删除分支

    1,切出指定版本 svn copy svn://192.168.1.52/help/branches/help_forShop_140307 -r 170 svn://192.168.1.52/hel ...

  3. 学习笔记：只有一套app设计稿（5s尺寸）切出4和4s尺寸以及安卓系统主流尺寸的图

    如何在只有一套app设计稿(5s尺寸)切出4和4s尺寸以及安卓系统主流尺寸的图 转自:http://www.zhihu.com/question/23255417   版权归原作者所有 目前ios手机 ...

  4. 【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  5. CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  6. 教你用CSS代码写出的各种形状图形

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片,今天就在这里教大家怎样用css代码写出各种规则不同的图形 1.正方形 #square {width ...

  7. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

  8. cocos2dx 3.3 场景切出时RenderTexture crash

    在cocos2dx 3.3中下面myScene在切出时会存在概率性崩溃(代码作了最大程度简化,仅为说明问题): class CmyLayer:public Layer{ public: CmyLaye ...

  9. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

随机推荐

  1. doctype声明、浏览器的标准、怪异等模式

    doctype 标准(严格)模式(Standards Mode).怪异(混杂)模式(Quirks Mode),如何触发,区分他们有何意义? 触发标准模式 1.加DOCTYPE声明,比如:<!DO ...

  2. CSS3中的网格

    在这篇文章中,我们将来看一些CSS3新属性,从而用HTML和CSS处理网格的时候更容易.但首先让我们讨论一点HTML和CSS网格的历史,了解清楚为什么以前很困难. 网格简史 曾几何时,我们的布局是一团 ...

  3. iOS自定义发送消息输入框

    简单的封装了一个,免得麻烦直接初始化就可以用了 ,有其他需求该里面参数就行了 WJEasyInputTextView.h , CGRectGetHeight([UIScreen mainScreen] ...

  4. D&F学数据结构系列——前驱和后继

    前驱和后继 本文所述为二叉排序树的前驱和后继,如果想了解二叉排序树的概念,可以参考我的博文http://www.cnblogs.com/sage-blog/p/3864640.html 给定一个二叉查 ...

  5. 开源DBCP、C3P0、Proxool 、 BoneCP连接池的比较

    简介 项目主页 使用评价  DBCP DBCP是一个依赖Jakarta commons-pool对象池机制的数据库连接池.DBCP可以直接的在应用程序用使用 http://homepages.nild ...

  6. C# 获取windows特殊路径

    虽然是古老的问题,最近用到这个,查一下还不少东东呐 一.使用Environment.SpecialFolder 该方法最简单,直接使用即可,只是提供的特殊路径比较少. (1)使用方法:string p ...

  7. 传说中的WCF（8）：玩转消息协定

    Message翻译成中文,相信各位不陌生,是啊,就是消息,在WCF中也有消息这玩意儿,不知道你怎么去理解它.反正俺的理解,就像我们互发短信一个道理,通讯的双方就是服务器与客户端,说白了吧,就是二者之间 ...

  8. （转）价值240万的photoshop中文教程，错过了后悔都来不及 （吹得好响）

      PS抠图方法 一.魔术棒法——最直观的方法 适用范围:图像和背景色色差明显,背景色单一,图像边界清晰. 方法意图:通过删除背景色来获取图像. 方法缺陷:对散乱的毛发没有用. 使用方法:1.点击“魔 ...

  9. 李洪强漫谈iOS开发[C语言-004]-开发概述程序设计语言程序编译过程

    汇编语言 指令用特定的名字来标记,这就是汇编语言 人比较容易看懂汇编语言 汇编直接和程序一一对应的 有汇编器把程序翻译成机器码 把高级语言编译成计算机识别的语言 程序编译过程 命令行 UNIX 系统中 ...

  10. lintcode: 堆化

    堆化 给出一个整数数组,堆化操作就是把它变成一个最小堆数组. 对于堆数组A,A[0]是堆的根,并对于每个A[i],A [i * 2 + 1]是A[i]的左儿子并且A[i * 2 + 2]是A[i]的右 ...