標籤:微軟 alt char lazy 不同 bsp 效果 分享 img
在製作網上中,經常會遇到繪製其它不規則的圖形,如六邊形,八邊形這類的,在複雜的圖形,也是由我們的基本圖形組成了,如上面的六邊形,就是由兩個三角形,一個矩形組成。
先看看,如何繪製三角形 ,與四邊形。 三角形:
<div class="triangle"></div>
.triangle{
width: 0px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
註: 將寬與高設定為0,設定邊框的寬度,及樣式的樣式,最後將上,左,右邊的邊框,設定成透明色,這樣我們就可以得到想到的三角形。
四邊形:
與三角形設定類似,不同的是,需要設定div的寬度,我們需要一個小的四邊形與一個大的四邊形,改變寬度的大小即可:
<div class="fourangle"></div>
<div class="fourangle2"></div>
.fourangle{
width: 70px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
.fourangle2{
width: 100px;
height: 0px;
border-width: 80px;
border-color:transparent transparent green;
border-style: solid;
}
效果
完整六邊形代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#shape{
margin: 200px 0px 0px 200px;
position: relative;
width: 300px;
height: 500px;
/*border: 1px solid red;*/
overflow: hidden;
background-image: url("img/bg/bg1.png");
background-position: center;
}
#div1{
position: absolute;
top:-150px;
width: 0px;
height: 0px;
border-width: 150px;
border-color:white white transparent;
border-style: solid;
}
#rect{
/*border: 1px solid green;*/
position: absolute;
top:150px;
width: 300px;
height: 200px;
}
#div2{
position: absolute;
top:350px;
width: 0px;
height: 0px;
border-width: 150px;
border-color:transparent white;
border-style: solid;
}
</style>
</head>
<body>
<div id="shape">
<div id="div1"></div>
<div id="rect"></div>
<div id="div2"></div>
</div>
</body>
</html>
使用CSS樣式,製作六邊形