简述

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. jquery中如何退出each循环

    在for循环中我们用continue退出当前循环,进入下一循环.用break跳出所有循环. 可是在jQuery中却并没有这两条命令,那么如何退出each循环呢? 经过查询得知: 在jQuery中用 r ...

  2. AESEncrypter加密算法代码示例

    package testJava.java; import java.security.SecureRandom; import java.util.Base64; import javax.cryp ...

  3. C# static方法-使用迭代器循环遍历文件中的额行

    //封装的方法 //读取文件的值,放入集合中 public static IEnumerable<string> ReadLines(string fileName) { using (T ...

  4. Android Grapics图像类体系

  5. Good Bye 2015 A. New Year and Days 签到

    A. New Year and Days   Today is Wednesday, the third day of the week. What's more interesting is tha ...

  6. Lua的require和module小结

    Lua的require和module小结  module特性是lua5.1中新增的,用于设置Lua文件自己的模块,最常用的方式是module(name,package.seeall),有时候lua文件 ...

  7. Shell练习 行列转换

    原题:https://leetcode.com/problems/transpose-file/Given a text file file.txt, transpose its content. Y ...

  8. weka平台下手动造.arff的数据

    若数据为 sunny,hot,high,FALSE,nosunny,hot,high,TRUE,noovercast,hot,high,FALSE,yesrainy,mild,high,FALSE,y ...

  9. 窗口截图(可指定HWND窗口句柄)（三篇文章）

    BOOL SaveHwndToBmpFile(HWND hWnd, LPCTSTR lpszPath) { HWND hDesktop = ::GetDesktopWindow(); ASSERT(h ...

  10. linux系统识别和挂载文件系统

    1. 使用df 命令查看文件系统及相关挂载点信息 [root@server101 ~]# df Filesystem 1K-blocks Used Available Use% Mounted on ...