CSS或HTML中的形狀

我一直在想，爲什麼在HTML中沒有特殊的形狀標籤或CSS中的樣式來製作形狀，如三角形，圓形或多邊形等。我不明白爲什麼這樣的性質沒有已經實施。他們沒有想到它嗎？我真的懷疑，還是他們故意拒絕提供？CSS或HTML中的形狀

2013-06-01 James Okpe George

http://css-tricks.com/examples/ShapesOfCSS/ – Cristy

HTML 5和CSS3可以做到這一點，一看就可以創建，作弊表已作出一切可能的形狀在http://www.land-of-web.com/freebies/css3-simple-shapes-cheat-sheet.html

編輯：Utkanos是正確的，你可以創建形狀，用我所做的鏈接，但要記住div容器會以塊的形式輸出。

2013-06-01 20:19:51

這主要是因爲盒模型概念要求塊級元素是矩形的。這樣做的原因是允許可預測的行爲，例如，當堆疊在一起或彼此相鄰時，這些元素如何相互作用。（旁註：這適合早期的互聯網，因爲網站是基於垂直的，並且幾乎沒有視覺定義的容器 - 它是一個接一個的文本塊，可能是被一張圖片打斷。水平堆疊的東西並不會直到後來才真正進入它。）

由於@ Cristy在評論中的鏈接顯示，有創建更復雜形狀的技巧。例如，可以通過創造性使用border-radius來實現圈和橢圓。其他形狀通過transform屬性依靠失真。

然而，重要的是要記住，這樣的模擬形狀將被瀏覽器視爲具有邊界BOX。這是支配一個元素與另一個元素有多近，以及它們的邊緣如何相交的基本原則。

來源

2013-06-01 20:20:47 Utkanos

的Html5

 <canvas id="myCanvas" width="200" height="100" 
    style="border:1px solid #000000;"> 
    </canvas>

可以用來繪製形狀。

來源

2013-06-01 20:58:47 VDN

其實，它的JavaScript，做繪圖。畫布只是，呃，畫布。 – Rob

OP中存在價值，認識到畫布提供了網頁上更復雜形狀的可能性。然而，這些形狀當然不是HTML元素，但是這些位圖是不可識別的（作爲元素），並且只在曾經被提交給畫布的視覺內存中存在。 – Utkanos

HTML和CSS都不是繪圖程序。雖然可以創建這些對象，但至少在某種程度上它們是令人費解的黑客。

來源

2013-06-01 21:17:18 Rob

這是因爲HTML僅僅意味着爲您的文本提供語義含義。雖然瀏覽器確實給大多數元素提供了一些默認樣式，但這僅僅是一個建議，並且默認樣式因瀏覽器而異。因此，就HTML而言，如果他們試圖實施<triangle>標籤，那麼它絕對會違背所有最佳做法。而且他們確實有在WEB開始時定義樣式的標籤（等等）。但它已被證明是一個噩夢來維護。因此，WEB的樣式元素被委託給了CSS。

現在，就CSS而言，自開始以來已經走過了很長一段路。所以，雖然沒有簡單的方法來做到這一點，但你提到的大多數東西都可以用CSS實現。像圈子這樣的東西其實很簡單。當涉及到三角形時，它更難一點。但是現在很多事情都可以通過一些CSS和JavaScript來實現。有很多Javascript庫專門用於繪製/動畫素材。

來源

2013-06-01 21:54:35 galdikas

這不是HTML用於標記文檔的目的。他們發明了像SVG這樣的東西，還有像XHTML這樣的可擴展標記語言，你可以用模塊化的方式將它們插入其中。

來源

2013-06-01 22:03:13

如前所述，HTML和CSS不包含任何嚴重的形狀功能。不使用Javascript和Canvas腳本的最接近的東西就是SVG，它實際上只是一個用XML編寫的矢量圖形。

SVG的進一步信息：

來源

2013-06-01 23:24:49 lukasdietrich

CSS或HTML中的形狀

回答

相關問題