首页 > 代码库 > css3 基本图形

css3 基本图形

2024-10-10 04:09:39   216人阅读

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>面试题</title>
	<style type="text/css">
	.main{padding: 50px;}
		.demo{margin: 30px 0;}
		.demo span{display: block;}

		.demo1 span { 
		width: 100px; 
		height: 100px; 
		background: red; 
		} 

		.demo2 span { 
		width: 100px; 
		height: 100px; 
		background: red;
		border-radius:50%;
		} 

		.demo3 span { 
		width: 200px; 
		height: 100px; 
		background: red;
		border-radius: 100px / 50px; 
		}


		.demo4 span { 
		width: 0; 
		height: 0; 
		border-left: 50px solid transparent; 
		border-right: 50px solid transparent; 
		border-bottom: 50px solid red; 
		}

		.demo5 span { 
		width: 0; 
		height: 0; 
		border-bottom: 50px solid transparent; 
		border-top: 50px solid transparent; 
		border-left: 50px solid red;
		} 

		.demo6 span { 
		width: 100px; 
		height: 100px; 
		border-bottom: 50px solid transparent; 
		border-top: 50px solid transparent; 
		border-left: 50px solid red;
		}
		
		.demo7 span { 
		width: 0; 
		height: 0; 
		border-left: 50px solid transparent; 
		border-right: 50px solid transparent; 
		border-bottom: 100px solid red; 
		position: relative; 
		}
		.demo7 span:after { 
		width: 0; 
		height: 0;
		content: "";
		border-left: 50px solid transparent; 
		border-right: 50px solid transparent; 
		border-top: 100px solid red; 
		position: absolute;
		top: 30px;
		left: -50px;
		}

		
		.demo8 span { 
		width: 120px; 
		height: 80px; 
		background: red; 
		position: relative; 
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; 
		border-radius: 10px; 
		} 
		.demo8 span:before { 
		content:""; 
		position: absolute; 
		right: 100%; 
		top: 26px; 
		width: 0; 
		height: 0; 
		border-top: 13px solid transparent; 
		border-right: 26px solid red; 
		border-bottom: 13px solid transparent; 
		}

		.demoM{
			width: 200px;height: 150px;border: red solid 2px;border-radius: 50%;background: #fff;position: relative;overflow: hidden;padding-top: 50px;
		}
		.demoM:after{
			content: "";
			width: 200px;height: 200px;background: red;position: absolute;top: 100px;left: 0;z-index: 0
		}
		.demoM .left{width: 100px;height: 100px;background: red;float: left;border-radius: 50%;position: relative;z-index: 1}
		.demoM .left:before{content: "";width: 10px;height: 10px;background: #fff;position: absolute;top: 45px;left: 45px;border-radius: 50%;}
		.demoM .right{width: 100px;height: 100px;background: #fff;float: left;border-radius: 50%;position: relative;z-index: 1}
		.demoM .right:before{content: "";width: 10px;height: 10px;background: red;position: absolute;top: 45px;left: 45px;border-radius: 50%;}


	</style>
</head>
<body>
	<div class="main">
		<div class="demo demo1">
			<span></span>
		</div>
		<div class="demo demo2">
			<span></span>
		</div>
		<div class="demo demo3">
			<span></span>
		</div>
		<div class="demo demo4">
			<span></span>
		</div>
		<div class="demo demo5">
			<span></span>
		</div>
		<div class="demo demo6">
			<span></span>
		</div>
		<div class="demo demo7">
			<span></span>
		</div>
		<div class="demo demo8">
			<span></span>
		</div>
		<div class="demo demoM">
			<span class="left"></span>
			<span class="right"></span>
		</div>
	</div>
</body>
</html>

　　技术分享

 

css3 基本图形


联系
我们