1
A
回答
7
是的,你可以只用CSS來做,但這並不容易,結果是......好吧,醜陋。 你可能要檢查這個問題,以及:CSS for inverted curved tabs
編輯:我今天有更好的主意,檢查此http://dabblet.com/gist/2762234
的CSS如下:
h1 {
min-width: 150px;
height: 30px;
margin: 0;
/**border: solid 2px #979797;/**/
border-bottom: none;
border-radius: 8px 0 0 0;
box-shadow: -2px -2px 2px #a5a5b1;
display: inline-block;
position: relative;
background: linear-gradient(#e8e8ea, #f8f8fa);
}
h1:before {
/**top: -2px;/**/
/**/top: 0;/**/
right: -23px;
width: 30px;
height: 30px;
border-radius: 0 8px 0 0;
/**border: solid 2px #979797;/**/
border-left: none;
border-bottom: none;
box-shadow: 2px -2px 2px #a5a5b1;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
background: linear-gradient(#e8e8ea, #f8f8fa);
content: '';
}
h1:after {
right: -44px;
/**bottom: 0;/**/
/**/bottom: 2px;/**/
width: 16px;
height: 8px;
/**border: solid 2px #979797;/**/
border-top: none;
border-right: none;
border-radius: 0 0 0 8px;
box-shadow: inset 2px -2px 2px #a5a5b1, -4px 4px 2px #f8f8fa;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
content: '';
}
div {
min-height: 130px;
margin-top: -7px;
/**border: solid 2px #979797;/**/
border-radius: 0 8px 0 0;
box-shadow: -2px -2px 2px #a5a5b1, 2px -2px 2px #a5a5b1;
background: linear-gradient(#f8f8fa, #f6f6f8);
}
它可以製成看起來更漂亮,但這將需要固定寬度的標題和div上的僞元素。
+0
真棒:)謝謝! – F0RR
0
您可以通過使用堆疊在彼此上的幾個元素來實現這一點。
我不認爲這是你想要製作的東西,所以我的建議是去背景圖片。
相關問題
- 1. 如何創建一個圓形的html/css元素?
- 2. 如何在CSS3圓形邊框處裁剪內部HTML元素?
- 3. CSS3 - 如何在矩形上創建圓形邊框半徑?
- 4. 如何使用CSS創建一個「部分邊框」的圓形
- 5. 你如何在一個元素周圍創建一個邊框?
- 6. 圓形元素的純色邊框
- 7. 如何在Android上爲GridView創建一個圓角矩形邊框?
- 8. 流體圓形元素旁邊的圓形元素
- 9. 如何在另一個上面創建一個HTML元素?
- 10. 在矩形的每一條邊上創建圓形
- 11. td元素上的圓角邊框
- 12. 在另一個圓形div的邊框上放置一個div
- 13. 創建一個只有兩個圓邊的矩形形狀
- 14. 如何在對角元素上創建CSS邊框
- 15. 如何創建一個圓角的圖像邊框?
- 16. 如何創建一個圓的邊界框android
- 17. 如何在視圖的一個邊上創建邊框?
- 18. 如何創建一個圓形按鈕?
- 19. 如何爲帶有邊框的圓形響應引導按鈕創建CSS?邊框正在影響像素
- 20. 創建一個圓形
- 21. 如何設計html元素的邊框?
- 22. 如何創建一個小於元素寬度的居中圓形陰影?
- 23. 在另一個元素邊框上的Android RelativeLayout對齊元素
- 24. 集中了一個圓形邊框
- 25. Android的圓形邊框圓形圖像
- 26. 元素邊框上的html mouseover事件
- 27. 在html/css中創建眉形元素
- 28. 如何在android中創建一個帶有圓形的方形框架按鈕?
- 29. 如何在html中創建邊框?
- 30. 如何創建一個圓形文本框?
這是http://dabblet.com/gist/2762234夠好嗎? – Ana