因此，我需要使用CSS制作重復的六角形圖案。如果需要圖像，我可以去那里，但是如果可能的話，我寧愿只使用CSS。基本上，我只需要一種創建六邊形形狀的方法，然后將文本/圖像覆蓋在它們之上。我還沒有太多代碼，因為我不太確定從哪里開始。問題是，我只能使用<div>（http://css-tricks.com/examples/ShapesOfCSS/）中所示的六邊形形狀的s ，但是它們不會連接。我可以使用重復的六邊形圖案，但是無法指定特定形狀的文本或圖像的確切位置。感謝您的任何幫助。
3 回答
慕容森
TA貢獻1853條經驗 獲得超18個贊
實際上，可以使用每個六邊形只有一個元素以及用于背景圖像和文本的偽元素來完成此操作。
演示
基本的HTML結構：
<div class='row'>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon content ribbon' data-content='This is a test!!!
9/10'></div><!--
--><div class='hexagon content longtext' data-content='Some longer text here.
Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>
您可以有更多行，只需要n在奇數行上有六邊形，在偶數行上有六邊形n+/-1。
相關CSS：
* { box-sizing: border-box; margin: 0; padding: 0; }
.row { margin: -18.5% 0; text-align: center; }
.row:first-child { margin-top: 7%; }
.hexagon {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0 8.5%;
padding: 16%;
transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before, .content:after {
display: block;
position: absolute;
/* 86.6% = (sqrt(3)/2)*100% = .866*100% */
top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */
transform: scaleX(1.155) /* 1.155 = 2/sqrt(3) */
skewY(-30deg) rotate(-30deg);
background-color: rgba(30,144,255,.56);
background-size: cover;
content: '';
}
.content:after { content: attr(data-content); }
/* add background images to :before pseudo-elements */
.row:nth-child(n) .hexagon:nth-child(m):before {
background-image:
url(background-image-mxn.jpg);
}
MM們
TA貢獻1886條經驗 獲得超2個贊
我將提供有關如何創建六邊形形狀的簡單演示。
.hex {
width: 40px;
height: 70px;
margin: 20px;
overflow: hidden;
}
.hex:before {
content: "";
transform: rotate(45deg);
background: #f00;
width: 50px;
height: 50px;
display: inline-block;
margin: 10px -5px 10px -5px;
}
<div class="hex">
</div>
- 3 回答
- 0 關注
- 808 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消