用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;
}

其他類別