用Html+CSS做出形狀
2021.02.02
分享一些用HTML+CSS能簡單做出來的形狀
正方形
成品
HTML
<div class="shape-ex1"></div>
CSS
.shape-ex1{
width: 200px;
height: 200px;
background-color: #666;
}
圓形
成品
HTML
<div class="shape-ex2"></div>
CSS
.shape-ex2{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #666;
}
三角形
成品
HTML
<div class="shape-ex3"></div>
CSS
.shape-ex3{
width: 0;
height: 0;
display: block;
border-left: 100px solid transparent;
border-bottom: 200px solid #666;
border-right: 100px solid transparent;
}
五角形
成品
HTML
<div class="shape-ex4"></div>
CSS
.shape-ex4{
width: 200px;
height: 110px;
background-color: #666;
display: block;
position: relative;
margin-top: 90px;
}
.shape-ex4::after{
content: '';
width: 0;
height: 0;
display: block;
border-left: 100px solid transparent;
border-bottom: 90px solid #666;
border-right: 100px solid transparent;
position: absolute;
bottom: 100%;
left: 0;
}
六角形
成品
HTML
<div class="shape-ex5"></div>
CSS
.shape-ex5{
width: 200px;
height: 90px;
background-color: #666;
display: block;
position: relative;
margin: 50px 0;
}
.shape-ex5::before{
content: '';
width: 0;
height: 0;
display: block;
border-left: 100px solid transparent;
border-bottom: 55px solid #666;
border-right: 100px solid transparent;
position: absolute;
bottom: 100%;
left: 0;
}
.shape-ex5::after{
content: '';
width: 0;
height: 0;
display: block;
border-left: 100px solid transparent;
border-top: 55px solid #666;
border-right: 100px solid transparent;
position: absolute;
top: 100%;
left: 0;
}
梯形
成品
HTML
<div class="shape-ex6"></div>
CSS
.shape-ex6{
width: 100px;
height: 150px;
background-color: #666;
display: block;
margin: 0 75px;
position: relative;
}
.shape-ex6::before{
content: '';
width: 0;
height: 0;
display: block;
border-left: 75px solid transparent;
border-bottom: 150px solid #666;
position: absolute;
top: 0;
right: 100%;
}
.shape-ex6::after{
content: '';
width: 0;
height: 0;
display: block;
border-bottom: 150px solid #666;
border-right: 75px solid transparent;
position: absolute;
top: 0;
left: 100%;
}
菱形
成品
HTML
<div class="shape-ex7"></div>
CSS
.shape-ex7{
width: 200px;
height: 200px;
display: block;
position: relative;
}
.shape-ex7::before{
content: '';
width: 0;
height: 0;
display: block;
border-left: 100px solid transparent;
border-top: 100px solid #666;
border-right: 100px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
.shape-ex7::after{
content: '';
width: 0;
height: 0;
display: block;
border-left: 100px solid transparent;
border-bottom: 100px solid #666;
border-right: 100px solid transparent;
position: absolute;
top: 0;
right: 0;
}
平行四邊形
成品
HTML
<div class="shape-ex8"></div>
CSS
.shape-ex8{
width: 200px;
height: 200px;
display: block;
position: relative;
background-color: #666;
transform: skew(-10deg) translateX(10%);
}
鳶形
成品
HTML
<div class="shape-ex9"></div>
CSS
.shape-ex9{
width: 200px;
height: 200px;
display: block;
position: relative;
}
.shape-ex9::before{
content: '';
width: 0;
height: 0;
display: block;
border-left: 100px solid transparent;
border-top: 150px solid #666;
border-right: 100px solid transparent;
position: absolute;
bottom: 0;
right: 0;
}
.shape-ex9::after{
content: '';
width: 0;
height: 0;
display: block;
border-left: 100px solid transparent;
border-bottom: 50px solid #666;
border-right: 100px solid transparent;
position: absolute;
top: 0;
right: 0;
}