起因是在网上看到了有人用纯css画出了英文字母，感觉不难，了解过css3的话都会感觉思路比较直观
主要用到的css知识点：绝对定位，圆角属性以及元素的宽高均为零时边框的挤压性质
效果图
源代码
<!DOCTYPE html>
<html>
<head>
<title>CSS-Letter</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.letter{
position:relative;
width:80px;
height:100px;
float:left;
margin-left:20px;
}
.A-widget-one{
width:0px;
height:0px;
border-bottom:100px solid #000;
border-left:40px solid transparent;
border-right:40px solid transparent;
position:absolute;
left:0px;
top:0px;
}
.A-widget-two{
width:0px;
height:0px;
border-bottom:63px solid #FFF;
border-left:25px solid transparent;
border-right:25px solid transparent;
position:absolute;
left:15px;
bottom:0px;
}
.A-widget-three{
width:32px;
height:15px;
background-color:#000;
position:absolute;
left:24px;
top:62px;
}
.B-widget-one{
width:15px;
height:100px;
background-color:#000;
position:absolute;
left:5px;
top:0px;
}
.B-widget-two,.B-widget-three{
width:60px;
height:50px;
background-color:#000;
border-top-right-radius:45%;
border-bottom-right-radius:45%;
position:absolute;
left:20px;
top:0px;
}
.B-widget-three{
top:50px;
}
.B-widget-four,.B-widget-five{
width:40px;
height:20px;
background-color:#FFF;
border-top-right-radius:45%;
border-bottom-right-radius:45%;
position:absolute;
left:20px;
top:15px;
}
.B-widget-five{
top:65px;
}
.C-widget-one{
width:80px;
height:100px;
background-color:#000;
border-radius:45%;
}
.C-widget-two{
width:40px;
height:60px;
background-color:#FFF;
border-radius:45%;
position:absolute;
left:20px;
top:20px;
}
.C-widget-three{
width:22px;
height:30px;
background-color:#FFF;
position:absolute;
right:0px;
top:35px;
}
</style>
</head>
<body>
<div class="letter">
<div class="A-widget-one"></div>
<div class="A-widget-two"></div>
<div class="A-widget-three"></div>
</div>
<div class="letter">
<div class="B-widget-one"></div>
<div class="B-widget-two"></div>
<div class="B-widget-three"></div>
<div class="B-widget-four"></div>
<div class="B-widget-five"></div>
</div>
<div class="letter">
<div class="C-widget-one"></div>
<div class="C-widget-two"></div>
<div class="C-widget-three"></div>
</div>
</body>
</html>
利用css的圆角属性和绝对定位可以做很多有意思的东西，例如下面就是一个用css画出来的太极图
代码
<!DOCTYPE html>
<html>
<head>
<title>css-taichi</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrapper{
width:300px;
height:300px;
margin:20px auto;
border:1px solid #CDCDCD;
position:relative;
}
.wrapper-circle{
width:200px;
height:200px;
border-radius:50%;
position:absolute;
left:50px;
top:50px;
animation-name:rotary-taichi;
animation-duration:3s;
animation-iteration-count:infinite;
animation-direction:alterlate;
}
.circle{
width:100px;
height:200px;
position:absolute;
}
.left-circle{
left:0;
top:0;
border-radius:200px 0 0 200px;
background-color:#EBEBEB;
}
.right-circle{
right:0;
top:0;
border-radius:0 200px 200px 0;
background-color:#000;
}
.minor-circle{
width:100px;
height:100px;
border-radius:50%;
position:absolute;
z-index:10;
}
.top-circle{
right:-50px;
top:0;
background-color:#EBEBEB;
}
.bottom-circle{
right:-50px;
bottom:0;
background-color:#000;
}
.tiny-circle{
width:30px;
height:30px;
border-radius:50%;
position:absolute;
left:35px;
top:35px;
z-index:20;
}
.top-circle .tiny-circle{
background-color:#000;
}
.bottom-circle .tiny-circle{
background-color:#EBEBEB;
}
@keyframes rotary-taichi{
transform-origin:50% 50%;
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="wrapper-circle">
<div class="left-circle circle">
<div class="top-circle minor-circle">
<div class="tiny-circle"></div>
</div>
<div class="bottom-circle minor-circle">
<div class="tiny-circle"></div>
</div>
</div>
<div class="right-circle circle">
</div>
</div>
</div>
</body>
</html>
时间： 2024-10-15 21:24:02