用css快速绘制多边形(三角形/菱形/梯形/五角星)-polygon辅助属性

在css中有个有趣的属性叫做clip-path,它的一种辅助属性叫做polygon,MDN对他的介绍如下:

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。polygon():定义一个多边形（使用一个 SVG 填充规则和一组顶点）

我们可以利用这个属性更加简洁的完成三角形或者是菱形梯形等多边形(直边)的绘制

one 三角形

首先惯例让我们一起来看一看效果图,三角形有非常明显的三个顶点,如下图所示

将三个顶点代入函数即可得到图形,注意我们在画多边形时一定要保证此元素有足够的空间可以放下坐标值,超出范围的部分可是不会显示的哦~

  .box {clip-path: polygon(17px 182px, 109px 23px, 199px 182px);background-color: pink;width: 199px;height: 182px;}

效果是一个粉色实心三角形

这也是clip-path属性的一个弊端,没办法添加边框,使用的限制非常多,但是作为一个功能强大的属性,还是很值得尝试和了解的:)

two 菱形

菱形是一个拥有四个顶点的图形,还是同理,我们需要先得到顶点坐标

代入代码就是

 .box {clip-path: polygon(34px 96px, 98px 32px, 163px 96px,98px 159px);background-color: cadetblue;width: 200px;height: 182px;}

打印出菱形之后,梯形和平行四边形等四边形就是完全一样的,接下来我们展示一个更加复杂的图形让大家更深层的感觉到这个属性的强大之处

three 五角星

首先先上顶点坐标图

无角星的顶点坐标比较多,在输入的时候一定要记得按照顺序输入,否则clip-path在处理时就有可能会发生错误生成意料之外的错误或者形状
代入代码如下

     .box {clip-path: polygon(31px 191px, 231px 180px, 364px 31px,435px 214px,619px 296px,463px 423px,444px 621px,277px 513px,80px 557px,132px 362px);background-color: yellow;width: 650px;height: 650px;}

效果如下

当然除了规则图形,此属性还能创造更多从来没有出现过的图形,大家如果感兴趣的话都是可以自行尝试自行探索的哦:)

end

用css快速绘制多边形(三角形/菱形/梯形/五角星)-polygon辅助属性相关推荐

三角形css_纯 CSS 实现绘制各种三角形（各种角度）
转载至:纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red, ...
纯 CSS 实现绘制各种三角形（各种角度）
纯 CSS 实现绘制各种三角形(各种角度) 一.前言三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的 ...
css画平行四边形、三角形、梯形
需求: 导航栏,有的标题栏需要使用平行四边形 . 梯形, 三角形应用的场景也比较多(面试) 思想: 使用伪元素覆盖父元素, 将背景颜色添加在父元素的底部设置index = - 1,让父元素的内容 ...
使用python turtle库绘制一个三角形和一个五角星_使用turtle库绘制一个五角星如何采用Python语言绘制一个五角星...
如何采用Python语言绘制一个五角星 #./usr/bin/env python import turtle import time turtle.forward(100) turtle.right ...
R语言polygon函数绘制多边形实战
R语言polygon函数绘制多边形实战目录 R语言polygon函数绘制多边形实战 #基本语法 #基础多边形绘制
html用css画多边形,Sass绘制多边形_Preprocessor, Sass, SCSS, clip-path, CSS处理器, 会员专栏教程_W3cplus...
CSS画图形在Web运用中时常看到,比如三角形.五角星,心形,Ribbon等.不过以前使用CSS绘制图形一般都是借助于border来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制.这篇文章将 ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
css 不规则边角_css绘制不规则三角形
css绘制不规则三角形 css绘制不规则三角形原理: 一个盒子包括: margin+border+padding+content上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下 ...
python绘制如下图形、小三角形边长20_在编程中发现数学之美——使用Python小龟绘制多边形...
在使用数学知识画出很酷的各种图形之前,你需要先学习Python编程语言的基础知识.本文将会带你熟悉以下编程概念:循环.变量.函数.使用小龟模块绘制图像.本文假设你已经安装了Python,如果没有,欢迎 ...

用css快速绘制多边形(三角形/菱形/梯形/五角星)-polygon辅助属性

用css快速绘制多边形(三角形/菱形/梯形/五角星)-polygon辅助属性相关推荐

最新文章

热门文章