一个圆形图片由多种颜色的拼接

最新推荐文章于 2021-08-28 22:54:47 发布

预见@

最新推荐文章于 2021-08-28 22:54:47 发布

阅读量1k

点赞数

分类专栏：拼接图形文章标签：图像裁剪 clip

本文链接：https://blog.csdn.net/weixin_44751462/article/details/90632926

版权

拼接图形专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<html>
    <head>
    <style type="text/css">
    #ball{
    	width:100px;
    	height:100px;
   	 	background-color:red;
    	border-radius:50%;
   		position:absolute;
    	clip:rect(0px,50px,100px,0px);//图像裁剪
    }
    #ball1{
   		 width:100px;
   		 height:100px;
    	 background-color:blue;
    	border-radius:50%;
	    position:absolute;
   		clip:rect(0px,100px,50px,50px);
    }
    #ball2{
    	width:100px;
    	height:100px;
    	background-color:green;
    	border-radius:50%;
    	position:absolute;
    	clip:rect(50px,100px,100px,50px);
    }
    
    </style>
    </head>
    
    <body>
    	<div id="ball"></div>
    	<div id="ball1"></div>
    	<div id="ball2"></div>
    </body>
 
    </html>