CSS3之利用边框制作常见图形
目的
在下面列出一些利用边框做出来的一些图形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 1000px;
margin:0 auto;
margin-top: 50px;
}
header{
width: 200px;
margin:0 auto;
text-align: center;
}
.item{
width: 230px;
height: 230px;
float: left;
position: relative;
background-color: #fff;
margin-left: 10px;
margin-top: 10px;
box-shadow: 2px 2px 15px #ccc;
}
.item:hover::after{
text-align: center;
line-height: 230px;
content: attr( data-brief);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(170,170,170,0.6);
font-style: normal;
opacity:0.8;
color: white;
font-size: 20px;
font-family: "微软雅黑";
}
.item:nth-child(1) .border-radius{
width: 180px;
height: 180px;
border: 1px solid red;
border-radius: 50%;
margin: 20px auto;
}
.item:nth-child(2) .border-radius{
width: 180px;
height: 180px;
border: 1px solid red;
border-top-left-radius: 90px 70px;
border-top-right-radius: 90px 70px;
margin: 20px auto;
}
.item:nth-child(3) .border-radius{
width: 180px;
height: 90px;
border: 1px solid red;
border-top-left-radius: 90px 90px;
border-top-right-radius: 90px 90px;
margin: 50px auto;
}
.item:nth-child(4) .border-radius{
width: 180px;
height: 180px;
border: 1px solid red;
border-top-left-radius: 70px 70px;
margin: 20px auto;
}
.item:nth-child(5) .border-radius{
width: 90px;
height: 90px;
border: 1px solid red;
border-top-left-radius: 90px 90px;
margin: 50px auto;
}
.item:nth-child(6) .border-radius{
width: 180px;
height: 90px;
border: 1px solid red;
border-radius: 90px/45px;
margin: 50px auto;
}
.item:nth-child(7) .border-radius{
width: 90px;
height: 180px;
border: 1px solid red;
border-radius: 45px/90px;
margin: 20px auto;
}
.item:nth-child(8) .border-radius{
width: 180px;
height: 45px;
border: 1px solid red;
border-top-left-radius: 90px 45px;
border-top-right-radius: 90px 45px;
margin: 80px auto;
}
.item:nth-child(9) .border-radius{
width: 45px;
height: 180px;
border: 1px solid red;
border-top-left-radius: 45px 90px;
border-bottom-left-radius: 45px 90px;
margin: 30px auto;
}
.item:nth-child(10) .border-radius{
width: 45px;
height: 180px;
border: 1px solid red;
border-top-left-radius: 45px 180px;
margin: 30px auto;
}
.item:nth-child(11) .border-radius{
width: 45px;
height: 45px;
border: 50px solid red;
margin: 40px auto;
border-radius: 50%;
}
.item:nth-child(12) .border-radius{
width: 45px;
height: 45px;
border: 50px solid red;
margin: 40px auto;
border-radius: 20px/20px;
}
.item:nth-child(13) .border-radius{
width: 45px;
height: 45px;
border: 50px solid red;
margin: 40px auto;
border-top-left-radius: 50%;
}
.item:nth-child(14) .border-radius{
width: 45px;
height: 45px;
border: 50px solid red;
margin: 40px auto;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
}.item:nth-child(15) .border-radius{
width: 0px;
height:0px;
border: 80px solid red;
margin: 40px auto;
border-color: red green yellow gray;
}
.item:nth-child(16) .border-radius{
width: 0px;
height:0px;
border: 80px solid red;
margin: 40px auto;
border-color: red green yellow gray;
border-right-color: rgba(255,255,255,0);
}
.item:nth-child(17) .border-radius{
width: 0px;
height:0px;
border: 80px solid red;
margin: 40px auto;
border-radius: 50%;
border-right-color: rgba(255,255,255,0);
}
.item:nth-child(18) .border-radius{
width: 0px;
height:0px;
border: 80px solid #FFFFFF;
margin: 40px auto;
border-radius: 50%;
border-right-color: red;
}
.item:nth-child(19) .border-radius {
width: 180px;
height: 0px;
border-top-width: 90px;
border-bottom-width: 90px;
border-style: solid;
border-top-color: red;
border-bottom-color: green;
border-radius: 90px;
margin: 40px auto;
}
.item:nth-child(20) .border-radius {
width: 180px;
height: 0px;
border-top-width: 90px;
border-bottom-width: 90px;
border-style: solid;
border-top-color: red;
border-bottom-color: green;
border-radius: 90px;
margin: 40px auto;
}
.item:nth-child(21) .border-radius {
width: 180px;
height: 0px;
border-top-width: 90px;
border-bottom-width: 90px;
border-style: solid;
border-top-color: red;
border-bottom-color: green;
border-radius: 90px;
margin: 40px auto;
}
.item:nth-child(21) .border-radius::before,
.item:nth-child(21) .border-radius::after{
display: block;
content: ".";
position: absolute;
width: 20px;
height: 20px;
top: 80px;
border-width:35px;
border-style: solid;
border-radius: 45px;
}
.item:nth-child(21) .border-radius::before{
left: 25px;
background-color: red;
border-color: green;
}
.item:nth-child(21) .border-radius::after{
right: 25px;
background-color: green;
border-color: red;
}
.item:nth-child(22) .border-radius {
width: 180px;
height: 0px;
border-top-width: 90px;
border-bottom-width: 90px;
border-style: solid;
border-top-color: red;
border-bottom-color: green;
border-radius: 90px;
margin: 40px auto;
}
.item:nth-child(22) .border-radius::before,
.item:nth-child(22) .border-radius::after{
display: block;
content: ".";
position: absolute;
width: 20px;
height: 20px;
top: 80px;
border-width:35px;
border-style: solid;
border-radius: 45px;
}
.item:nth-child(22) .border-radius::before{
left: 25px;
background-color: red;
border-color: green;
}
.item:nth-child(22) .border-radius::after{
right: 25px;
background-color: green;
border-color: red;
}
.item:nth-child(23) .border-radius {
width: 180px;
height: 80px;
margin: 80px auto;
background-color: red;
}
.item:nth-child(23)::before{
content: ".";
width: 0px;
height: 0px;
border-width: 10px;
border-style: solid;
position: absolute;
top: 100px;
left: 5px;
border-color: white;
border-right-color: red;
}
.item:nth-child(24) .border-radius {
width: 50px;
height: 50px;
margin: 80px auto;
border-width: 30px 0 30px 50px;
border-style: solid;
border-color: red;
border-bottom-right-radius: 60px;
}
.item:nth-child(25) .border-radius{
width: 90px;
height: 40px;
margin: 80px auto;
border-width: 50px 4px 50px 50px;
border-style: solid;
border-color: red;
border-radius: 30px 60px 60px 30px;
}
.item:nth-child(26) .border-radius{
width: 120px;
height: 90px;
background-color: red;
margin: 70px auto;
border-radius: 10px;
}
.item:nth-child(26) .border-radius::after{
content: ".";
width: 35px;
height: 35px;
border-width: 0px 0px 20px 0px;
border-style: solid;
border-color: red;
position: absolute;
top: 50px;
right: 30px;
border-bottom-right-radius: 60px;
}
.item:nth-child(27) .border-radius {
width: 180px;
/*height: 180px;*/
height: 90px;
border: 1px solid red;
border-radius: 90px/45px;
margin: 70px auto;
/*百分比是按横竖两个对应的方向的长度进行计算*/
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h3>CSS3 边框圆角</h3>
</header>
<div class="main">
<div class="item" data-brief="整圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="拱形">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="左上角">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四分之一圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="横着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半个横着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="半个竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四分之一竖着的椭圆">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="饼环">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="左上角圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="对角圆饼">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="四边不同色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="右透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆右透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆右红透明色">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图前世">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图前世2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图今生">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="阴阳图今生2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="消息框">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="奇怪的图形">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="奇怪的图形2">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="QQ对话">
<div class="border-radius"></div>
</div>
<div class="item" data-brief="圆角百分比">
<div class="border-radius"></div>
</div>
</div>
</div>
</body>
</html>
