首頁 網頁資源RESOURCES CSS
用Html+CSS做出形狀

用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;
}
其他類別