CSS绘制简单图形
※ 本文主要总结基本图形的绘制
(一)圆形类
.circle{
border-radius:50%;
width:100px;
height:100px;
}
.hole{
border-radius:50%;
width:50px;
height:50px;
border:25px solid Tomato;
background-color: transparent;
}
.ellipse{
border-radius:50%;
width:200px;
height:100px;
}
.capsule{
border-radius:50px; /*容器高度的一半*/
width:200px;
height:100px;
}
<div class="circle" title="圆形"></div>
<div class="hole" title="空心圆"></div>
<div class="ellipse" title="椭圆"></div>
<div class="capsule" title="胶囊"></div>
(二)多边形类
.deta_1{/* 利用边框,width与height值都为0 */
width:0;
height:0;
border-width:50px;
border-color:transparent transparent Tomato transparent;
border-style:solid;
background-color: transparent;
}
.deta_2{/* 利用CSS3渐变色(注意兼容性)*/
width:100px;
height:100px;
background-color: transparent;
background:-moz-linear-gradient(left bottom,Tomato 70px,transparent 70px);
}
.trapezoid_1{/* 利用边框,width与height有值 */
width:50px;
height:50px;
border-width:50px;
border-color:transparent transparent Tomato transparent;
border-style:solid;
background-color: transparent;
}
.trapezoid_2_wrap{
perspective:300px;
perspective-origin:center;
background-color: transparent;
}
.trapezoid_2{
width:150px;
height:100px;
transform:rotate3d(1,0,0,30deg);
transform-origin:center;
transform-style:preserve-3d;
border-radius:20px 20px 0 0 ;
}
.rectangle_wrap{
width:150px;
overflow:hidden;
/* display:block; */
}
.rectangle{
margin:50%;
/* display:block; */
}
<div class="deta_1" title="三角形"></div>
<div class="deta_2" title="三角形"></div>
<div class="trapezoid_1" title="梯形"></div>
<div class="trapezoid_2_wrap"><div class="trapezoid_2" title="梯形"></div></div>
<div class="rectangle_wrap">
<div class="rectangle" title="2:1矩形"></div>
</div>
(三)其他图形
.heart{
width:100px;
height:100px;
position:relative;
margin-top:80px;
margin-left:40px;
transform:rotateZ(45deg);
}
.heart:before,.heart:after{
content:" ";
position:absolute;
width:100px;
height:100px;
background-color: Tomato;
border-radius:50%;
}
.heart:before{
top:-50px;
}
.heart:after{
left:-50px;
}
<div class="heart" title="心形"></div>
.grid{
width:100px;
height: 100px;
background-image: linear-gradient(45deg,tomato 25%,transparent 25%),
linear-gradient(-45deg,tomato 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,tomato 25%),
linear-gradient(-45deg,transparent 75%,tomato 25%);
}
.grids{
width:270px;
height:150px;
background-image: linear-gradient(45deg,tomato 25%,transparent 25%),
linear-gradient(-45deg,tomato 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,tomato 25%),
linear-gradient(-45deg,transparent 75%,tomato 25%);
background-size: 30px 30px;
}
<div class="grid" title="格子"></div>
<div class="grids" title="格子背景"></div>