-5
我目前正在開發一個網站,設計團隊在這樣的購買過程中製作了一些進度條。Hexagon shape btn-group
http://www.4shared.com/photo/4PPLguwXba/untitled.html
我使用的是引導和它所提供的組件將不會幫我做。無論如何,我可以做這樣的事情嗎?我只是發現了六角形的顏色填充,這不是我想要的。
在此先感謝!
我目前正在開發一個網站,設計團隊在這樣的購買過程中製作了一些進度條。Hexagon shape btn-group
http://www.4shared.com/photo/4PPLguwXba/untitled.html
我使用的是引導和它所提供的組件將不會幫我做。無論如何,我可以做這樣的事情嗎?我只是發現了六角形的顏色填充,這不是我想要的。
在此先感謝!
這種方法可以讓您快速瞭解如何儘可能地接近1010儘管遠非完成。
$('.start').click(function() {
$('.start, .added').removeClass("startActive").removeClass("addedActive");
$(this).toggleClass("startActive");
});
$('.added').click(function() {
$('.start, .added').removeClass("startActive").removeClass("addedActive");
$(this).toggleClass("addedActive");
});
div {
display: inline-block;
height: 100px;
width: 200px;
border-top: 5px solid gray;
border-bottom: 5px solid gray;
position: relative;
text-align: center;
margin-left: -4px;
}
.start {
margin-left: 45px;
}
.start:before,
.startActive:before {
content: "";
position: absolute;
height: 70px;
width: 70px;
top: 12px;
left: -38px;
border-bottom: 5px solid gray;
border-left: 5px solid gray;
transform: rotate(45deg);
}
.startActive,
.addedActive {
border-top: 5px solid red;
border-bottom: 5px solid red;
}
.startActive:before {
border-bottom: 5px solid red;
border-left: 5px solid red;
}
.added:before,
addedActive:before {
content: "";
position: absolute;
height: 70px;
width: 70px;
top: 12px;
left: -38px;
border-top: 5px solid gray;
border-right: 5px solid gray;
transform: rotate(45deg);
}
.start:after,
.added:after,
.addedActive:after,
.startActive:after {
content: "";
position: absolute;
height: 70px;
width: 70px;
top: 12px;
right: -38px;
border-top: 5px solid gray;
border-right: 5px solid gray;
transform: rotate(45deg);
}
.startActive:after {
border-top: 5px solid red;
border-right: 5px solid red;
z-index: 8;
}
.addedActive:before {
border-top: 5px solid red;
border-right: 5px solid red;
z-index: 8;
}
.addedActive:after {
border-top: 5px solid red;
border-right: 5px solid red;
z-index: 8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="start">start</div>
<div class="added">middle</div>
<div class="added">end</div>
注:我不是在jQuery的最好的,雖然我已經加入 '活躍' 部分(點擊元素 '激活' 它)。
謝謝你,它工作得很好,這是我所需要的。這讓我在項目中領先! – 2015-02-11 20:09:21
你嘗試過什麼嗎? – Turnip 2015-02-11 12:48:22
是的,我看了很多網站,這裏有一些。 http://jtauber.github.io/articles/css-hexagon.html http://csshexagon.com/ – 2015-02-11 12:52:25
歡迎來到SO。 SO的問題太廣泛了。它缺乏對代碼的適當嘗試。所有相同的,也許[這](http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only)和[this](http://stackoverflow.com/問題/ 25445118 /拉長 - 六角形按鈕使用只有一個元素/ 25448974#25448974)可以提供幫助。 – 2015-02-11 12:55:47