1. 入門屋首頁
  2. 編程入門
  3. 前端入門

用css繪制六邊形的div

用css繪制六邊形的div

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>純css繪制六邊形-jq22.com</title>

</head>

<body>

<div id="sharpContainer">

<div class="sharp center">

</div>

<div class="sharp top">

</div>

<div class="sharp top-left">

</div>

<div class="sharp top-right">

</div>

<div class="sharp bottom">

</div>

<div class="sharp bottom-left">

</div>

<div class="sharp bottom-right">

</div>

</div>

<script>

</script>

</body>

</html>

.sharp:before {

content:"";/*不需要展現文字等內容,所以設置為空字符 */

width:0px;

border-bottom:80px solid transparent;

border-top:80px solid transparent;

border-right:40px solid orangered;

position:absolute;

left:-40px;

top:0px;

}

.sharp {

min-width:100px;

height:160px;

background:orangered;

display:inline-block;

position:absolute;

line-height:160px;

color:#FFFFFF;

font-size:20px;

text-align:center;

}

.sharp:after {

content:"";/*不需要展現文字等內容,所以設置為空字符*/

width:0px;

border-bottom:80px solid transparent;

border-top:80px solid transparent;

border-left-width:40px;

border-left-style:solid;

border-left-color:orangered;

position:absolute;

right:-40px;

top:0px;

}

#sharpContainer {

width:100%;

height:600px;

}

#sharpContainer .center {

top:200px;

left:300px;

}

#sharpContainer .top {

top:20px;

left:300px;

}

#sharpContainer .top-left {

top:110px;

left:140px;

}

#sharpContainer .top-right {

top:110px;

left:460px;

}

#sharpContainer .bottom {

top:380px;

left:300px;

}

#sharpContainer .bottom-left {

top:290px;

left:140px;

}

#sharpContainer .bottom-right {

top:290px;

left:460px;

}

作者:屋主
鏈接:http://www.kxhvmj.live/program/frontend/1154.html
來源:入門屋
入門屋著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權并注明出處。

聯系我們

400-800-8888

在線咨詢:點擊這里給我發消息

郵件:[email protected]

工作時間:周一至周五,9:30-18:30,節假日休息

广东11选五走势图