我想知道如何繪製帶有邊框的透明背景的三角形?我發現的例子不提供邊界。任何方式來完成這個?如何繪製帶有邊框的透明背景的三角形?
6
A
回答
10
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position:relative;
}
.triangle:after{
content:'';
position:absolute;
top:5px;
left:-45px;
width: 0;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 92px solid white;
}
-2
絕對在現有的一個稍小的三角形。
0
它的三角形透明背景,邊框可以使用兩種這些一個接一個的 http://jsfiddle.net/alexdets/vYAZQ/26/
7
以上的下面是一個透明的純CSS三角形邊框做:
.container {
width: 200px;
height: 200px;
position: relative;
border-top: 4px solid #e74c3c;
}
.triangle {
position: absolute;
margin: auto;
top: -70px;
left: 0;
right: 0;
width: 137px;
height: 137px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 4px solid #e74c3c;
border-bottom: 4px solid #e74c3c;
}
+2
對於尋找解決方案的人來說,這是我見過的最糟糕的演示。 –
+2
我的意思是它很酷,但是發生的太多了。 –
+1
因爲我正在使用我正在構建的工具中的大部分css3功能,這實際上比使用圖像或畫布更實用。 – FDIM
相關問題
- 1. 帶有1px邊框的透明背景?
- 2. 使六邊形形狀的邊框,圓角和透明背景
- 3. 帶邊框的透明三角
- 4. 帶邊框半徑的透明背景
- 5. 如何繪製帶有透明背景(GDI)的圖案花紋?
- 6. 帶不透明邊框的半透明背景色
- 7. 如何繪製透明背景?
- 8. 如何繪製透明描邊來顯示CodeName背景中的背景?
- 9. 帶有三角形側向箭頭的分隔盒 - 透明與邊框
- 10. 帶圓角的繪製三角形
- 11. 在BufferedImage上繪製帶有不透明度的圓角矩形
- 12. 繪製帶有彩色圓角邊框的矩形形狀
- 13. iOS - 如何在視圖中繪製透明三角形
- 14. 如何創建一個帶有白色背景,帶有三角形箭頭的灰色邊框的佈局 - Android
- 15. 如何爲透視效果製作邊框的透明邊角?
- 16. 在透明底部邊框的div頂部的CSS三角形
- 17. 帶白色邊框的三角形
- 18. 帶三角形的Css邊框
- 19. SASS帶透明背景和1px白色邊框的按鈕
- 20. CSS絲帶 - 如何在無視背景的情況下製作透明三角形
- 21. 與透明背景和漸變邊框
- 22. 用線性漸變強制在CSS三角形上的透明背景
- 23. 具有透明背景的div之間的三角形分隔符
- 24. 帶有透明背景的圖像Launchscreen.storyboard
- 25. 如何使背景透明並在div的左右部分創建三角形?
- 26. 帶有圓角的背景圖像的div中的透明div
- 27. 如何在透明背景的閃光燈下製作帶有透明背景的電影
- 28. 如何繪製彎曲邊界的右下角三角形?
- 29. OpenGL的:如何繪製三角形或多邊形平滑
- 30. 透明JButton仍然繪製其背景
這是不透明的,它是一個白色背景 –