-4
Q
CSS自定義形狀
A
回答
0
這是一個看起來像你需要的形狀,你必須做一些邊界和變換技巧,你也需要使用:之後和:在選擇器之前建立這種形狀。
#diamond-shield {
\t width: 0;
\t height: 40;
\t border: 50px solid transparent;
\t border-bottom: 50px solid orange;
\t position: relative;
\t top: -10px;
left: 250px;
transform-origin: 0% 0%;
transform: rotate(82deg)
}
#diamond-shield:after {
\t content: '';
\t position: absolute;
\t left: -50px; top: 50px;
\t width: 0;
\t height: 0;
\t border: 50px solid transparent;
\t border-top: 370px solid orange;
}
#chevron {
position: relative;
text-align: center;
padding: 8px;
top: -9px;
margin-bottom: 6px;
left:164px;
height: 0px;
width: 60px;
transform-origin: 0% 0%;
transform: rotate(-98deg);
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: white;
transform: skew(0deg, 44deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: white;
transform: skew(0deg, -44deg);
}
<div id="diamond-shield"></div>
<div id="chevron"></div>
而且你可以在這裏觀看一些例子:https://css-tricks.com/examples/ShapesOfCSS/
+0
哇,非常感謝你@PabloMáximo – sanaa
相關問題
- 1. CSS自定義形狀箭頭
- 2. 使自定義形狀的DIV + CSS HTML
- 3. CSS + HTML自定義形狀按鈕
- 4. Css自定義形狀按鈕
- 5. css自定義形狀的背景色
- 6. 使用css製作自定義形狀
- 7. 使用CSS創建自定義形狀
- 8. CSS定義形狀橢圓
- 9. 用自定義形狀自定義ImageView
- 10. 自定義形狀的iframe
- 11. 自定義按鈕形狀
- 12. UIView與自定義形狀
- 13. html5 canvas自定義形狀
- 14. 自定義ActionBar形狀android
- 15. 自定義形狀NSButton
- 16. 自定義形狀:Android的
- 17. 作物自定義形狀
- 18. InkAnalyzer UWP - 自定義形狀
- 19. UIViewController.view.superview自定義形狀
- 20. ScatterViewItem自定義形狀
- 21. 自定義形狀ListView
- 22. WPF自定義形狀
- 23. Three.js - 自定義形狀?
- 24. SVG自定義圓形狀
- 25. Android形狀自定義矩形
- 26. 的CSS:菜單懸停創建自定義形狀背景圖片(平行四邊形的形狀使用CSS)
- 27. HTML/CSS中的自定義形狀文本區
- 28. 跨瀏覽器自定義形狀與css
- 29. 如何在CSS自定義形狀上放置文本?
- 30. 如何在html/css中自定義形狀的按鈕?
@sanna - 歡迎堆棧溢出,請閱讀怎麼問 - http://stackoverflow.com/help/how-到問。這不是一個代碼寫作服務,你必須顯示你到目前爲止嘗試過的內容 – micstr
這篇文章中的圖像不斷變化... – Jer
@sanaa我認爲你很困惑,不知道你想問什麼? –