我需要風格水平線<hr>
像附圖所示。有沒有什麼辦法可以做到這一點與純CSS,這也將在IE8中工作?CSS風格水平線
Q
CSS風格水平線
1
A
回答
1
編輯:對不起,我錯過了你的IE8的要求......這可能不會在那裏工作。我道歉。我無法查看它。
您可以使用:之前並創建一個盒子,旋轉,應用一些邊框,絕對定位它,瞧,你有它:
http://jsfiddle.net/v7y1bp9s/1/
HTML:
<div class="container">
<hr class="line"></hr>
</div>
CSS:
.container {
float: left;
width: 100%;
height: 50px;
background-color: #1978a4;
line-height: 50px;
}
hr.line {
border-color: #fff;
position: relative;
}
hr.line:before {
content: '';
height: 10px;
width: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-color: #1978a4;
top: -5px;
}
+0
背景應該是透明的。我只附上了模型的截圖。所以當我刪除bg的顏色是這樣的:http://jsfiddle.net/v7y1bp9s/2/ 任何機會得到正確的形狀? – 2015-04-03 18:08:39
+0
據我所知,沒有辦法讓這個形狀可以讓你像你需要的那樣添加邊框。此外,它不能是一個透明的背景,形狀的顏色需要涵蓋
的一小部分,以使它看起來像它在我的小提琴中的樣子。使它透明只是暴露
並擊敗目的。 – 2015-04-03 18:49:04
相關問題
- 1. CSS水平線
- 2. CSS 3水平手風琴
- 3. JQuery水平手風琴CSS
- 4. 風格水平規則
- 5. CSS - 定位水平線
- 6. 水平線的CSS問題,<hr />色彩風格不是在IE 9
- 7. 水平手風琴格下降減少
- 8. CSS/HTML - 圓圈數字的水平線
- 9. 如何使水平線使用CSS
- 10. 使用HTML/CSS的水平線
- 11. jQuery:自定義水平手風琴風格展示問題
- 12. 水平手風琴風格的WPF/C#TabItem標題。可能?
- 13. 浮動水平手風琴
- 14. 麥克風活動水平
- 15. jQuery水平手風琴
- 16. jQuery - 水平手風琴onClick
- 17. wpf gridview中的水平網格線
- 18. 繪製水平網格線R
- 19. CSS水平滾動
- 20. CSS水平菜單
- 21. CSS水平菜單
- 22. HTML水平線HR
- 23. 水平線填充
- 24. 水平線對齊
- 25. CSS類風格
- 26. 變換(270deg)寬度和左css問題的水平手風琴
- 27. 水平手風琴教程css問題我認爲
- 28. CSS水平子菜單
- 29. CSS響應水平居中
- 30. CSS水平列表滾動?
請發佈您已經嘗試過的代碼。 – j08691 2015-04-03 16:46:01