简述

clip-path属性指定一个应用到元素上的剪切路径。应用在SVG中<clipPath>元素上的属性值可以完全运用在clip-path属性上。还可以使用CSS Shapes模块中的基本形状来定义剪切路径。这些形状可以使用形状函数来创建。这些形状态函数包括polygon()、circle()、inset()(用来定义嵌入的矩形)和ellipse()。

使用clip-path属性将一个剪切路径运用在一个元素上非常的简单，下面我们来看一个剪切实现。

剪切

效果

通过clip-path我们可以设置一个剪切路径，polygon表示多边形。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>剪切横幅</title>

<style type='text/css'>

div {

  width: 250px;

  padding: 9px 0 9px 5%;

  color: #fff;

  background-color: #d32f36;

  -webkit-clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);

  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);

}

</style>

</head>

<body>

  <div>剪切横幅</div>

</body>

</html>

分析

我们先看下图

坐标横坐标和纵坐标起点均是从0开始，最大值为100%。

图中标识出的顺序依次对应polygon的坐标，polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%)。

即：

1 - 坐标点：0 0

2 - 坐标点：100% 0

3 - 坐标点：95% 50%

4 - 坐标点：100% 100%

5 - 坐标点：0 100%

6 - 坐标点：5% 50%

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

  1. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

  2. CSS Clip剪切元素实例

    一.实例1: .fixed { position: fixed; width: 382px; height: 100px; background: red; border: 1px solid blu ...

  3. CSS之切出横幅

    简述 上节分享了clip-path来实现一个剪切横幅,本节通过另外一种方式来实现一个更经典的横幅. 简述 最终效果 小三角 效果 源码 阴影分割 效果 源码 合并 最终效果 我们先看一下最终要实现的效 ...

  4. 在线编辑器ACE Editor的使用

    ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...

  5. ACE Editor在线代码编辑器简介及使用引导

    转自博客:https://www.cnblogs.com/cz-xjw/p/6476179.html ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScrip ...

  6. 微信小程序新闻列表功能（读取文件、template模板使用）

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

  7. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  8. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  9. 超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

    每门语言总有那么一些不太常用,却又不可或缺的语法操作.下面说一下,在HTML文件中,如何设置用 "省略号" 和 "剪切" 代替大量文字的效果. 以下是HTML的 ...

随机推荐

  1. Codeforces Round #231 (Div2) 迟到的解题报告

    题目A: 给一个火柴等式,可以从左边移动一根到右边,也可以从右边移到左边,但是不能移动“+”,”=“的火柴, 而且加法里面的数都要大于0(很重要的条件),基本上注意到这点的都过了,没注意的都被HACK ...

  2. Sqli-labs less 47

    Less-47 本关的sql语句为    $sql = "SELECT * FROM users ORDER BY '$id'"; 将id变为字符型,因此根据我们上述提到的知识,我 ...

  3. 使用 polyfills 的简易方法

    本文作者为 Andrew Betts 与 Robert Nyman.Andrew 是金融时报(Financial Times)实验室主任,该实验室旨在金融时报开发并推广实践性的 Web 技术.Robe ...

  4. HDU5002 Tree(LCT)

    今天做了一道LCT模板题之后忽然间好像记起来LCT的模板怎么用了,于是就把上次网络赛的一道LCT补一下.典型的删边,加边操作,还有路径加和路径set为一个数.维护的是路径第二大以及它有多少个,后来想想 ...

  5. swift-网络请求

    跟着网上大神写了个,还有待提高啊:http://pan.baidu.com/s/1sjC5Pl7

  6. 刘汝佳 算法竞赛-入门经典 第二部分 算法篇 第六章 1（Lists）

    127 - "Accordian" Patience 题目大意:一个人一张张发牌,如果这张牌与这张牌前面的一张或者前面的第三张(后面称之为一位置和三位置)的点数或花式相同,则将这张 ...

  7. JDBC资料集

    1.基本的JDBC概念: http://dev.mysql.com/doc/refman/5.1/zh/connectors.html#cj-basic-jdbc 2.JSP&Servlet学 ...

  8. 使用动态SQL语句实现简单的行列转置（动态产生列）

    原始数据如下图所示:(商品的销售明细)date=业务日期:Item=商品名称:saleqty=销售数量: -- 建立测试数据(表)create table test (Date varchar(10) ...

  9. Integral类型的跨平台使用

    fundamental integral types or extended integral types 我们先通过下图,来了解可以跨平台使用的整数类型: 之所以我们需要以上各种明确指定宽度的int ...

  10. appium自动化测试中获取toast消息的解决方法【转】

    http://blog.csdn.net/hqzxsc2006/article/details/50036911 待实践.. 解决方法:appium下切换selendroid模式去获取Android的 ...