CSS之clip-path绘制多边形

最新推荐文章于 2023-10-12 15:17:43 发布
最新推荐文章于 2023-10-12 15:17:43 发布
阅读量333 收藏
点赞数
原文链接：http://www.cnblogs.com/daiyayi/p/10929285.html
版权 
clip-path表示的是裁剪路径

语法格式 clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

clip-source：可以是内、外部的SVG的<clip-path>元素的URL引用
basic-shape：使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()
geometry-box：是可选参数。此参数和basic-shape函数一起使用时，可以为basic-shape的裁剪工作提供参考盒子。
               如果geometry-box由自身指定，那么它会使用指定盒子形状作为裁剪的路径，包括任何(由border-radius提供的)的角的形状

eg.
<style>
  .box{
    width: 500px;
    height: 500px;
    background-color: lightblue;
    border: 5px solid gray;
    clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%, 0 70px)
  }
</style>
 
<body>
  <div class="box">
  </div>
</body> 


裁剪效果如下：

 

 
 
说明：“（）”中的数据表示，裁剪边框结点坐标位置，按照顺时针方向，这些点连起来的边即为裁剪边框，围成的平面图形即为裁剪区域
坐标原点为左上角
 
 

学习原址：https://www.w3cplus.com/css3/introducing-css-clip-path-property.html
 
 
 
 

 

转载于:https://www.cnblogs.com/daiyayi/p/10929285.html

                

        

        




    




    

      

        

            

              
                
                  weixin_34378767
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
利用CSS中linear制作复杂的边框效果

				
			

			

				

					09-24
				

			

		

		

			
				
主要介绍了利用CSS中linear制作复杂的边框效果的相关资料，利用linear-gradient属性制作绚丽的边框效果

			
		

	



                

              
                



	

		

			

				
					
css属性clip-path的使用说明

				
			

			

				

					Liz's blog hut.
				

				

					10-27
					
					629
					
				

			

		

		

			
				
当ui设计上的图片、div等的形状不是长方形，而是多边形的时候，就可以借助clip-path这个css属性来实现。clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。【from:MDNclip-path可以理解为一把剪刀，将图片、div等剪裁成我们所希望的形状。下面，将着重介绍下clip-path的三个函数，分别是polygon()、circle()、ellipse()关于clip-path的介绍就到这里，如果觉得自己去写太麻烦的话，网上也有一个工具。

			
		

	



                


  
              

                


	

		

			

				
					
2022-02-11 学习记录：通过CSS3的clip-path实现多边形

				
			

			

				

					weixin_44845483的博客
				

				

					02-11
					
					605
					
				

			

		

		

			
				
今天学习了使用CSS实现多边形，感觉很有意思也很使用的一个属性
项目中遇到了需要画梯形，如果使用切图的话，对于不同分辨率下兼容性可能不太好实现，所以还是得靠前端强大的功能来实现！
使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变
polygon可以定义多边形，需要写入每个顶点的坐标位置(具体数值或者百分比都可以)
下边写一个画出五角星的例子
 .try-empty {
        position: absolute;
        width: 100%;
    

			
		

	





	

		

			

				
					
学习 clip-path属性 和 常用方式

				
			

			

				

					小小的前端
				

				

					08-09
					
					5110
					
				

			

		

		

			
				
clip-path 属性

clip-path 属性是 clip 属性的升级版。
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
clip 属性只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形。
第一类值 basic-shape 一种形状，由不同的函数绘制。
第二类值 clip-source 用 <url> 的方式引用SVG 的 <clipPath> 来作为剪裁路径。
第三类值 geometr

			
		

	



		

			
		



	

		

			

				
					
clip-path画图形

				
			

			

				

					A20190518的博客
				

				

					06-07
					
					385
					
				

			

		

		

			
				
通过加背景色，先画外圈，再画内圈，实现只留有边框长度的样式。clip-path可截取不规则图形。

			
		

	





	

		

			

				
					
CSS3绘制六边形的简单实现

				
			

			

				

					12-13
				

			

		

		

			
				
总结起来，CSS3绘制六边形的关键在于巧妙地利用伪元素和边框技巧，通过创建和组合三角形来构造多边形形状。这种方法不仅灵活，而且性能高效，是现代网页设计中的一个重要工具。对于想要增强网页视觉效果和互动体验的...

			
		

	





	

		

			

				
					
div-css制作多边形.zip

				
			

			

				

					06-24
				

			

		

		

			
				
1. **使用CSS clip-path**：`clip-path`属性允许我们定义一个剪裁路径，这个路径可以是多边形。通过指定一系列的点和连接线，可以形成一个自定义的多边形。例如，我们可以创建一个五边形：   ```css  .polygon {  ...

			
		

	





	

		

			

				
					
纯css3多边形地球仪特效特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
`clip-path`可以通过内联SVG或者使用`polygon()`函数定义一个由多个顶点组成的多边形剪裁路径。在这个特效中，地球可能被分割成多个多边形，每个多边形代表不同的地理位置。  6. **响应式设计**：  为了确保在不同...

			
		

	





	

		

			

				
					
使用css3绘制出各种几何图形

				
			

			

				

					09-27
				

			

		

		

			
				
除此之外，CSS3还提供了许多其他图形绘制功能，如`clip-path`用于剪裁元素形状，`mask`用于元素的遮罩效果，以及`polygon()`函数用于创建自定义的多边形。这些工具结合使用，可以创造出更加复杂且富有创意的图形设计...

			
		

	





	

		

			

				
					
CSS3SVG绘制的悉尼歌剧院

				
			

			

				

					11-07
				

			

		

		

			
				
在绘制过程中，开发者可能会使用到SVG的`clip-path`或`mask`属性来剪裁或隐藏不必要的部分，确保最终图像的准确性和艺术性。  总之，CSS3和SVG的结合使用，使得网页设计师能够创造出与真实世界相媲美的视觉体验，...

			
		

	





	

		

			

				
					
使用clip-path来画不同的形状，三角形，多边形，菱形，六边形等等

				
			

			

				

					
				

				

					10-12
					
					400
					
				

			

		

		

			
				
单词"clip path"的直译过来就是：裁剪路径clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。也就是说，使用 clip-path 可以将一个容器裁剪成任何我们想要的样子。div {

			
		

	





	

		

			

				
					
css clip-path裁剪形状，实现绘制常用的形状和图形。反向裁剪

				
			

			

				

					PrimaryColor
				

				

					06-16
					
					2817
					
				

			

		

		

			
				
效果图：

图1：



图2：



图3：



代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-sc

			
		

	





	

		

			

				
					
在固定框高内图片剧中显示，不变形

				
			

			

				

					
				

				

					12-05
					
					502
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Com...

			
		

	





	

		

			

				
					
clip-path

				
			

			

				

					时光清浅处，一步一安然
				

				

					04-24
					
					1730
					
				

			

		

		

			
				
clip-path
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
语法： clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;




属性
描述




clip-source
用 URL 表示剪切元素的路径


basic-shape
将元

			
		

	





	

		

			

				
					
CSS和SVG中的剪切——clip-path属性和<clipPath>元素

				
			

			

				

					桐花万里路
				

				

					08-08
					
					1600
					
				

			

		

		

			
				
本文由大漠根据SaraSoueidan的《Clipping
 in CSS and SVG – The clip-path Property and  Element》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明原作者相关信息http://sarasoueidan.com/blog/css-svg-clipping/。
——作者：Sa

			
		

	





	

		

			

				
					
clip-path 教程：使用 CSS 中的 clip-path 轻松实现多边形

				
			

			

				

					weixin_33739646的博客
				

				

					05-18
					
					268
					
				

			

		

		

			
				
作为一个前端开发，一个主要的工作就是来实现设计师设计的UI界面。而在UI界面中，各种各样的形状元素应用则是随处可见，比如三角形：

以前碰到这种形状的时候，会使用各种黑科技的技巧，比如使用CSS中的border属性来模拟实现这类型的三角形就是一种主流的实现方法。
虽然种实现方法看起来很灵巧，但是为来实现这一个小小的三角形，就不得不添加无意义的标签，而且使用起来非常的笨拙不是很灵活。在远古的前端开发...

			
		

	





	

		

			

				
					
CSS使用clip-path绘制一个不规则边框

				
			

			

				

					pnjtvxcp的博客
				

				

					06-19
					
					3921
					
				

			

		

		

			
				
简介

clip-pathCSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状。clip-path属性代替了现在已经弃用的剪切clip属性。
...

			
		

	





	

		

			

				
					
你可能还不知道的CSS好用属性：clip-path

				
			

			

				

					sybh的博客
				

				

					11-08
					
					1690
					
				

			

		

		

			
				
你是不是还在用这种方式，利用 border 的 color 属性来实现三角形。今天给大家介绍一个 css 中的一个不是很常用的属性clip-path来实现一个三角形。

			
		

	





	

		

			

				
					
使用 clip-path 绘制多种图形

				
			

			

				

					jimojianghu的专栏
				

				

					03-02
					
					5756
					
				

			

		

		

			
				
clip-path是一个CSS属性，剪切路径，允许用不同的剪切方式创建元素的可显示区域，区域内的内容可以展示，区域外的内容则隐藏。它的基本取值可以有圆形(circle)、椭圆(ellipse)、多边形(polygon)、矩形(inset)，使用它们可以绘制各种不同的形状。

			
		

	





	

		

			

				
					
css的clip-path

					
最新发布

				
			

			

				

					11-12
				

			

		

		

			
				
clip-path属性可以使用各种形状，如圆形、椭圆形、多边形等，也可以使用SVG路径来定义剪切区域。以下是一个使用SVG路径定义剪切区域的例子：  ```css .clip {  clip-path: url(#myClip); }  /* 定义SVG路径 */      ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值