首页 > 代码库 > css3 基本图形
css3 基本图形
<!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 基本图形
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。