css clip-path 画五角星

简介

使用裁剪方式创建元素的可显示区域，实现区域裁剪。

浏览器兼容性

常用的三种方法

1. clip-path: circle(50px at 50px 50px)

以 50px 50px 的坐标为圆心裁剪一个半径 50px 的圆；

2. clip-path: ellipse(30px 40px at 50px 50px)

以 50px 50px 的坐标为圆心裁剪一个横向半径 30px，纵向半径 40px 的椭圆；

3. clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)

按照多个坐标（x,y）剪裁一个多边形，此处是菱形。

有了clip-path，就可以轻易的实现任意多边形

绘制五角星

<div>五角星</div>

div{color: #fff;font-size: 24px;text-align: center;width: 200px;height: 200px;line-height: 200px;background: red;/* 绘制路径 */clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);
}

补充阴影

若想给五角星加阴影直接用box-shadow没有任何效果,这是就用到了drop-shadow，关于此属性点击此处查看详情
具体代码

div{color: #fff;font-size: 24px;text-align: center;width: 200px;height: 200px;line-height: 200px;position:relative;/*不规则阴影*/filter:drop-shadow(0 0 12px rgba(0,0,0,0.5));
}
div:after{content:'';position: absolute;left: 0;right: 0;top: 0;bottom: 0;/* 设置层级，避免div内容被遮盖 */z-index: -1;background: red;/* 绘制路径 */clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);
}

效果图：

我的`个人博客`有空来坐坐

https://www.wangyanan.online

css clip-path 画五角星相关推荐

html css画五角星,css画梯形，css画五角星， css画六角星，css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
android path 画星星
使用 path 画星星,刚开始我也是像大家一样去百度一下,学习了一下各位大佬如何画星星,根据下面这套理论我就敲代码了,花了点时间,也能做出了效果代码长是长了点,然而有个问题,大家是否有共鸣,你的P ...
python画五角星没有填色_Python使用turtule画五角星的方法
Python使用turtule画五角星的方法本文实例讲述了Python使用turtule画五角星的方法.分享给大家供大家参考.具体实现方法如下: #!/usr/bin/env python impo ...
css指定位置画圆,【翻译】4种CSS画圆的方法
四种方法 1. Border Radius .circle { background: #456BD9; border: 0.1875em solid #0F1C3F; border-radius: ...
python画五角星代码_Python使用Turtle模块绘制五星红旗代码示例
在Udacity上课时学到了python的turtle方法,这是一个很经典的用来教小孩儿编程的图形模块,最早起源于logo语言.python本身内置了这个模块,其可视化的方法可以帮助小孩儿对编程的一些 ...
CSS clip:rect矩形剪裁功能
CSS中有一个属性叫做clip,为修剪,剪裁之意.配合其属性关键字rect可以实现元素的矩形裁剪效果.此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
Path画直线与弧线
代码地址如下: http://www.demodashi.com/demo/14754.html ####前言之前讲过Paint和Canvas的基本使用,今天来介绍下Path的使用涉及内容有: P ...

css clip-path 画五角星

简介

浏览器兼容性

常用的三种方法

1. clip-path: circle(50px at 50px 50px)

2. clip-path: ellipse(30px 40px at 50px 50px)

3. clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)

绘制五角星

补充阴影

我的`个人博客`有空来坐坐

css clip-path 画五角星相关推荐

最新文章

热门文章

css clip-path 画五角星

简介

浏览器兼容性

常用的三种方法

1. clip-path: circle(50px at 50px 50px)

2. clip-path: ellipse(30px 40px at 50px 50px)

3. clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)

绘制五角星

补充阴影

我的个人博客有空来坐坐

css clip-path 画五角星相关推荐

最新文章

热门文章

我的`个人博客`有空来坐坐