如何用css製作HTML形狀

如何用一個HTML元素製作形狀？只要至少在一個瀏覽器中支持，任何CSS技術都可以使用。如何用css製作HTML形狀

形狀的例子可以是圓形，三角形，六角形等等。

來源

2012-09-25 parkin

我什至不知道問題是什麼，但'邊界半徑：50％; -moz-border-radius：50％;'可以是其中一個答案... – Mark

第一輪形狀，但它的邊界半徑完成。那麼現在即時嘗試使三角形... – parkin

我得到了但我認爲它只是Firefox瀏覽器只，但對於所有瀏覽器你知道如何創建CSS ... – parkin

我已經this fiddle一些純HTML/CSS形狀：
- 使用跨邊界
2三角形 - 邊框圓角的幫助

免責聲明圓：我是從舊的谷歌的啓發應用程序/菜單欄。

來源：

HTML

An CSS triangle pointing down: 
<span class="delta_down"></span><br> 
An CSS triangle pointing up: 
<span class="delta_up"></span><br> 
Circle: 
<span class="circle"></span>

CSS

span.delta_down { 
     border-color: #C0C0C0 transparent transparent; 
     border-style: solid dashed dashed; 
     border-width: 5px 5px 0; 
     display: inline-block; 
     font-size: 0; 
     height: 0; 
     line-height: 0; 
     padding-top: 1px; 
     position: relative; 
     top: -1px; 
     width: 0; 
} 

span.delta_up { 
     border-color: transparent transparent #C0C0C0; 
     border-style: dashed dashed solid; 
     border-width: 0 5px 5px; 
     display: inline-block; 
     font-size: 0; 
     height: 0; 
     line-height: 0; 
     padding-top: 1px; 
     position: relative; 
     top: -1px; 
     width: 0; 
} 

span.circle { 
     border-radius: 50%; 
     width: 10px; 
     height: 10px; 
     display: inline-block; 
     background-color: #C0C0C0; 
}

來源

2012-09-25 07:19:02

這對純HTML和CSS來說是不可能的。但是您可以使用canvas元素並使用JavaScript繪製所有形狀。

This basic tutorial可能會幫助你。

來源

2012-09-25 06:54:51 QQping

http://css3shapes.com/有關於如何在CSS中製作大量形狀的說明。

但嚴重的是，在瀏覽器中繪製圖形比使用CSS更好。

上述站點中顯示的大多數形狀僅適用於現代瀏覽器，因爲它們使用CSS3技術，這些技術在IE8等瀏覽器中不可用。（所以如果你想在舊版本的IE中做到這一點，答案是忘了它）。

但支持這些形狀的相同瀏覽器也支持其他技術，如SVG，它允許您繪製任何你喜歡的形狀，而不受工作在盒子形狀周圍的限制。

所以簡短的回答是肯定的，它可以完成，但SVG會給你更好的結果。

來源

2012-09-25 06:57:20 Spudley

但沒有使用圖像我可以給所有瀏覽器支持，包括即低版本？？ – parkin

+1個很好的資源，例如我使用類似的東西爲內聯網，因爲我可以控制使用什麼瀏覽器:) –

@parkin - 不，這是我的觀點：大多數CSS形狀顯示需要像'border-radius'或'：before'和'：after'，這些在舊版瀏覽器中不可用。他們在IE7中加載該頁面，並查看其中有多少頁面正確顯示。很少，我敢打賭。 – Spudley

如何用css製作HTML形狀

回答

相關問題