css第一阶段小结第5节——用CSS绘制简单图形

MarilynManson
MarilynManson 发布于 7 天前 浏览:128 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
用css可以画的一些图形,其实实用性不大,就拿来练练,加深对一些属性的理解,真正实用的应该还是SVG图像用canvas画的。

<!DOCTYPE html>
<html>
<head>
    <title>轮播图</title>    
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">    
    <style type="text/css">
    *{
    	padding:0;
    	margin:0;
    	font-family: "微软雅黑";
    }
    body{
    	padding:10px;
    }
    body *{
    	float:left;
    	margin:10px;
    }    

    .enlarge{
    	position: relative;
    	width:200px;
    	height:200px;
    }      
    .enlarge-a{
    	position: absolute;
    	width:200px;
    	height:200px;
    	border:15px solid black;
    	border-radius:100px;
    	box-sizing: border-box;    	
    }     
    .enlarge-b{
    	position: absolute;
    	left:200px;
    	top:150px;
    	width:50px;
    	height:200px;
    	background-color:black;
    	border-radius:50px;
    	box-sizing: border-box;
    	transform: rotate(-45deg);    	
    }      
      
    .crucifix{
    	position: relative;
    	width:200px;
    	height:200px;
    }
    .crucifix-a{
    	position: absolute;
    	left:40px;
    	background-color:black;
    	width:20px;
    	height:120px;
    }
    .crucifix-b{
    	position: absolute;
    	top:35px;
    	width:100px;
    	height:20px;
    	background-color:black;    	
    }    
    
    .house{
    	width:200px;
    	height:400px;
    	position:relative;
    }  
    .house-a{
    	position: absolute;
        width:0px;
        height: 0px;
    	border-top:100px solid rgba(255,255,255,0);      
    	border-right:100px solid rgba(255,255,255,0);         	   
    	border-left:100px solid rgba(255,255,255,0); 
    	border-bottom:100px solid black;       		
    }
    .house-b{
    	position: absolute;    
    	top:200px;	
    	left:20px;
    	width:160px;
    	height:100px;
    	background-color:black;    	
    } 
    .house-c{
    	position: absolute; 
    	top:250px;	
    	left:75px;    	   	
    	width:50px;
    	height:50px;
    	background-color:white;  	
    }     
       
    .man{
    	width:200px;
    	height:200px;
    	position:relative;
    }  
    .man-a{
    	position:absolute;
    	left:25px;
    	width:50px;
    	height: 50px;
    	background-color:black;
    	border-radius: 50px;
    }
    .man-b{
    	position:absolute; 
    	top:50px;   	
    	width:100px;
    	height: 50px;
    	background-color:black;
    	border-radius: 50px 50px 10px 10px;
    }    
    .arrow{
    	width:400px;
    	height:400px;
    	position:relative;    	
    }  
    .arrow-a{
    	position:absolute;  
    	left:1px;   	
    	width:50px;
    	height: 200px;
        border:50px solid;
    	border-right-color:RGBA(255,255,255,0);
    	border-bottom-color:RGBA(255,255,255,0);   
    	border-left-color:black;
    	border-top-color:black;     	  	   	
    }    
    .arrow-b{
    	position:absolute; 
    	top:150px;
    	left:0px;   	
    	width:270px;
    	height: 50px;
        border:50px solid;
    	border-left-color:RGBA(255,255,255,0);
    	border-top-color:RGBA(255,255,255,0);   
    	border-right-color:black;
    	border-bottom-color:black;     	  	   	
    }      
    .arrow-c{
    	position:absolute; 
    	top:50px;
    	left:130px;    	
    	width:150px;
    	height:550px;
    	border-top:80px solid black;  
   	    border-radius: 150px 0 0 0/150px 0 0 0;   	      	
    } 
    .arrow-d{
    	position:absolute; 
    	top:10px;
    	left:270px;    	
        width:0px;
        height: 0px;
    	border-top:80px solid rgba(255,255,255,0);      
    	border-right:80px solid rgba(255,255,255,0);         	   
    	border-left:80px solid black; 
    	border-bottom:80px solid rgba(255,255,255,0);   	
    }          
    </style>
</head> 

<body>
    <div class="wrap">    
    <div class="enlarge">
        <div class="enlarge-a"></div>	
    	<div class="enlarge-b"></div>	    	
    </div>
    </div>
    
    <div class="crucifix">
        <div class="crucifix-a"></div>	
    	<div class="crucifix-b"></div>	    	
    </div>
    
    <div class="house">
        <div class="house-a"></div>	
    	<div class="house-b"></div>	
    	<div class="house-c"></div>	    	
    </div>
    
    <div class="man">
        <div class="man-a"></div>	
    	<div class="man-b"></div>	   	
    </div> 
    
    <div class="arrow">
        <div class="arrow-a"></div>	
    	<div class="arrow-b"></div>	 
        <div class="arrow-c"></div>	
    	<div class="arrow-d"></div>	    	
    </div>     
    
    

</body>
</html>


视频连接:http://www.imooc.com/learn/588
标签:
z
给个赞 0 人点赞
收藏 1 人收藏
评论 已有 1 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
陈陈陈大文
陈陈陈大文6 天前1F
真正实用的是UI给的图。。。
举报 支持 (0) 回复 (0)
MarilynManson MarilynManson 作者

全心全意学习前端技术

作者最新