我正在嘗試創建一個類似於上圖所示的進度箭頭欄。我從一列欄(四列col-sm-4)開始,不知道從哪裏出發。在HTML/CSS/JS中創建一個箭頭欄
0
A
回答
3
我做(由this post啓發)帶形狀的div你想:
.container{
width: 100%;
position: relative;
display: flex;
flex-direction: row;
}
.v-div {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-left: 25px solid #f00;
}
.box{
height: 80px;
width: 320px;
background: red;
}
<div class="container">
<div class="box">
</div>
<div class="v-div">
</div>
</div>
有幾個他們的重疊,你應該是好去!
1
了一個解決方案:前和:後
.arrow {
font-size: 0;
}
.inner-arrow {
\t width:210px;
\t height:80px;
display: inline-block;
\t background-color:green;
\t text-align:center;
\t font-size:20px;
\t font-weight:bold;
\t line-height:80px;
vertical-align: middle;
}
.arrow:before,
.arrow:after {
\t content:'';
display: inline-block;
\t width:0;
\t height:0;
\t border:40px solid transparent;
vertical-align: middle;
}
.arrow:before {
\t border-top-color: green;
\t border-bottom-color: green;
\t border-right-color: green;
}
.arrow:after {
\t border-left-color: green;
}
<div class="arrow">
<div class="inner-arrow">Next step</div>
</div>
1
您可以通過使用CSS僞元素:before
和after
實現這一目標。
檢查下面的代碼片段:
ul{
padding:0;
list-style-type: none;
border:1px solid #ccc;
}
ul:before,ul:after{
content:"";
display:table;
}
ul:after{
clear:both;
}
ul li {
display: inline-block;
width: 25%;
float: left;
text-align: center;
text-transform: uppercase;
font-size: 10px;
font-family: sans-serif;
}
ul li.active {
background: forestgreen;
color: #fff;
}
ul li a {
padding: 0 12px;
height: 40px;
line-height: 40px;
position: relative;
display: block;
}
ul li.active a:before,ul li.active a:after{
content: "";
position: absolute;
border-style: solid;
border-color: transparent transparent transparent white;
border-width: 20px;
left: 0px;
}
ul li.active a:after{
content: "";
right: -40px;
left: auto;
border-color: transparent transparent transparent forestgreen;
}
ul li.active a {
padding-left: 30px;
}
<ul>
<li><a>job post</a></li>
<li class="active"><a>invite</a></li>
<li><a>review</a></li>
<li><a>hire</a></li>
</ul>
相關問題
- 1. UINavigationItem:創建一個 「nextBarButtonItem」(= rightBarButtonItem箭頭)
- 2. 如何在矩形中創建一個小箭頭
- 3. HTML/CSS - 在DIV的一側創建一個「箭頭」
- 4. 如何用箭頭字符串「*」在箭頭上創建尾端?
- 5. 創建透明箭頭
- 6. CSS創建消息箭頭
- 7. 創建箭頭飛行
- 8. 如何創建這個動畫箭頭?
- 9. 如何使用'乳膠箭頭符號'在圖中創建對角箭頭?
- 10. 在opengl中繪製一個箭頭ES
- 11. 在Pygame中繪製一個箭頭
- 12. CSS:如何創建一個按鈕,右邊的箭頭placedo
- 13. 你如何創建一個箭頭主題進度條導航?
- 14. 如何創建一個填充箭頭CustomLineCap?
- 15. 如何創建一個命名的異步箭頭函數?
- 16. 用css創建一個帶圓圈的div裏面的箭頭
- 17. 的Apache POI XSSF不能創建一個向上的箭頭
- 18. 在WPF中創建一個菜單欄?
- 19. 創建動畫漸變箭頭
- 20. 用箭頭創建矩形DIV
- 21. 如何創建箭頭類型佈局?
- 22. 用箭頭創建自定義提示
- 23. Android中的操作欄中的圖標是一個箭頭(< - )而不是箭頭(<)
- 24. 使一個小箭頭CSS
- 25. 如何在菜單欄上創建指向我應用圖標的箭頭?
- 26. 如何創建一個箭頭指向另一個窗口的窗口?
- 27. 如何使用KineticJS從一個圓圈創建箭頭到另一個圓圈?
- 28. Android - 如何正確繪製一個帶箭頭的箭頭?
- 29. 在面前添加一個箭頭
- 30. 在底部做一個箭頭
你也可以使用:前:after僞元素,而不是一個額外的V-DIV –