css裁剪clip-path画多边形

clip-path有三种属性

第一种 circle 画圆
clip-path: circle(30%); 30%为半径大小
clip-path: circle(50% at 50% 50%); 后面的50%为圆心位置

第二种 ellipse 椭圆
clip-path: ellipse(32% 43% at 49% 50%); 32%为宽 43%为高 后面两个49%,50%为圆心位置

第三种 polygon 多边形
clip-path: polygon(14% 10%, 100% 9%, 100% 100%, 0 83%);
几个逗号就是几个描点 这个例子为四个,说明是四边形,每组的第一个参数是x轴距离,第二个参数为y距离,距离0,0为画图开始的左上角

这是简单的文字参数说明
想要画更强大的css多边形可用下面链接神器
https://www.html.cn/tool/css-clip-path/ 多边形生成器,自动生成你想要的多边形css样式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

教你培养成功的必备因素——强烈的企图心

企图心没有教,但是可以培养,我可以教你如何培养自己的企图心 有一次我上安东罗宾的课程,在夏威夷,安东罗宾的课程有很多世界第一名演讲,分享他们成为冠军的经验。安东罗宾请了一个马拉松选手,这个马拉松不是…

Vue基础之Vue条件渲染

v-if 在 Vue.js &#xff0c;我们使用 v-if 指令实现的功能 也可以用 v-else 添加一个 “else” 块 template-if 因为 v-if 是一个指令&#xff0c;需要将它添加到一个元素上。但是如果我们想切换多个元素呢&#xff1f;此时我们可以把一个<template>元素当做包装…

React开发(100):3.0没有image

./src/pages/Goods/Brand/index.js Module not found: Cant resolve antd/es/image in E:\shangjiahoutai\yoao-static-pc-merchant\src\pages\Goods\Brand

pro*C/C++支持c++开发实例

Pro*C/C同时支持C和C&#xff0c;但是当预编译包含C代码的PC源程序时&#xff0c;必须合理地设置相关的预编译选项。 代码&#xff1a;xx.pc /*功能&#xff1a;演示了Pro*C/C源程序生成C源文件说明&#xff1a;Pro*C/C支持C和C。当预编译包含C代码的PC源程序时&#xff0c;必…

用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

系统主菜单如下图所示&#xff1a; 首先&#xff0c;介绍下这个主菜单&#xff0c;它包含了一个动画logo以及一个按钮选项&#xff0c;动画logo每隔1秒钟切换一张图片&#xff0c;点击相应的按钮选项会切换不同的游戏场景。 下面看下这个界面的源码&#xff1a; /*** Power by …

推荐一篇文章,.net3.0新特性

推荐一篇文章&#xff0c;.net3.0新特性 http://www.codeproject.com/KB/cs/csharp3.aspx转载于:https://www.cnblogs.com/yukaizhao/archive/2007/12/21/net30.html

一些实用却很少用到的css以及标签

1、p:first-letter p标签里的第一个字设置样式 p:first-letter { font-size:200%; color:#8A2BE2; }<p>My best friend is Mickey.</p>2、p:first-line p标签里的设置第一行样式 3、:not&#xff08;p&#xff09; 设置非 p元素的所有元素的背景色 4、<hr>…

Vue基础之Vue列表渲染

列表渲染 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法&#xff0c; items 是源数据数组并且 item 是数组元素迭代的别名 基本用法&#xff1a; 在 v-for 块中&#xff0c;我们拥有对父作用域属性的完全访问权限。 v-f…

Pro*c使用指示变量来处理NULL列值

代码&#xff1a;xx.pc /* 功能&#xff1a;演示了Oracle使用指示变量(专门用来处理NULL值)指示变量专门用于处理数据库的NULL值&#xff0c;它是一种short类型的C语言变量。当执行内嵌SELECT语句或FETCH语句时&#xff0c;如果不引用指示变量&#xff0c;并且返回值为NULL&am…

React开发(101):样式处理

{title: 品牌信息,dataIndex: intro,render: (text, row) > {return (<div><div style{{ float: left }}><img src{row.logo} style{{ width: 100px, height: 100px }} /></div><div style{{ float: left, marginLeft: 24px }}><p>{row…

三 JSP 技术

一 JSP 概述 1. 本质&#xff1a;在 HTML 语言中混合 Java 程序代码&#xff0c;由服务器端 Java 语言引擎解释执行。其中&#xff0c;HTML 负责描述信息显示格式&#xff0c;JSP 负责描述处理逻辑。 2. JSP 代码运行环境&#xff1a;需要系统安装 JSP 引擎&#xff0c;最常用的…

Don't Laugh!I'm An English Book笔记(五)——面部词语大总结加补充

head hairscalp&#xff1a;头皮dandruff&#xff1a;头皮屑braincerebral deathforeheadwrinkleeyebroweyelideyeeyelashcrows feetdouble eyelidnosesnub nose strawberry noseaquiline nosenostrilvibrissa&#xff1a;鼻毛cheek earearlobe&#xff1a;耳唇facial hairmous…

vue 3D旋转木马轮播图

利用carousel-3d插件。 安装 npm install -S vue-carousel-3d全局引入 import Vue from vue import Carousel3d from vue-carousel-3d Vue.use(Carousel3d&#xff09;局部引入 import { Carousel3d, Slide } from "vue-carousel-3d";export default {components:…

Vue基础之事件处理器

监听事件&#xff1a; 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码 示例 方法事件处理器&#xff1a; 许多事件处理的逻辑都很复杂&#xff0c;所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用 示例 内…

React开发(102):别写立即执行函数

<Buttontype"link"onClick{() > {this.handlePro(row.certificationImg);}}>查看</Button>

删除windows换行符^M

有些内容从windows下拷贝到unix下后&#xff0c;发现文本文件中多了^M&#xff08;在vim中查看&#xff09;&#xff0c;那么如何删除这个字符呢。 在网上找了下答案&#xff0c;有好几种方法&#xff0c;但是我试了下&#xff0c;只有一种是成功的&#xff0c;那就是”tr -d &…

React开发(103):详细路径 不然找不到

import { BaseTabs, BaseUploadImage, BaseHighSearch, BaseTable } from /common/components; import BaseTables from /common/components/BaseTables;

vmin、vmax用处

vmin、vmax用处 100vmin指的是屏幕宽和高中较小的那个 100vmax指的是屏幕宽和高中较大的那个 做移动页面开发时&#xff0c;如果使用 vw、wh 设置字体大小&#xff08;比如 5vw&#xff09;&#xff0c;在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当…

分享SharpZipLip使用代码

zip类public class ZipClass { /**//// <summary> /// 压缩方法 /// </summary> /// <param name"strPath">要压缩文件夹</param> /// <param name"strFileName">生成的文件名</p…

Vue基础之表单控件绑定

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇&#xff0c;但 v-model 本质上不过是语法糖&#xff0c;它负责监听用户的输入事件以更新数据&#xff0c;并特别处理一些极端的例子 基础用法&#xff1…