简述

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. Linux安装Flash player

    在线自动更新:Flash Player Update(需java) ===================== 下载得到install_flash_player_11_linux.x86_64.tar ...

  2. 一道题DP

    Problem Description 小明明又被大威鱼抓住了,大威鱼把小明明关在地牢里,地牢由n * n 个房间组成,小明被困在地牢的最左上角的房间中,出口在最右下角,他想逃出这个诡异的地牢,但是他 ...

  3. WSDL相关文档

    http://msdn.microsoft.com/en-us/library/ms996486.aspx http://msdn.microsoft.com/en-us/library/aa4685 ...

  4. 您可能不知道的ASP.Net小技巧

    <!-- 页码和简介 --> 1．  在提交页面之后,保持滚动条的位置 可以在page指令上加上MaintainScrollPositionOnPostback指令 <%@ Page ...

  5. C#&java重学笔记(变量与操作符)

    声明:自用参看读物 C#部分 1.C#中的byte和sbyte并不是二进制的比特,而是无符号 和 有符号的 8位整数. 2.decimal和float double都用来表示小数,前者用e的10的几次 ...

  6. jdom处理的XML Document 和String 之间的相互转化

    package util; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileWriter; ...

  7. ZJU 1180 Self Numbers（暴力模拟判断，水题）

    题目链接 同HDU 1128 , POJ 1316(这个范围小一点). 原本怕超时,以为有技巧或者规律,死命的想,后来发现这就是一道水体,模拟着全部判断一下就好了,10秒呢,完全不怕超时...唔,废话 ...

  8. jackson set properties to default value (取消让jackson 赋予默认值)

    you can define it with Integer rather than int or long. define it with a package type. jackson wont' ...

  9. lintcode:Ugly Number I

    Ugly Number Write a program to check whether a given number is an ugly number`. Ugly numbers are pos ...

  10. java、el表达式中保留小数的方法

    Java中: import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFormat; p ...