CSS魔法系列:純CSS繪製圖形(各種形狀的鑽石)
我們的網頁因為 CSS 而呈現千變萬化的風格。這一看似簡單的樣式語言在使用中非常靈活,只要你發揮創意就能實現很多比人想象不到的效果。特別是隨著 CSS3 的廣泛使用,更多新奇的 CSS 作品湧現出來。
《CSS 魔法系列》繼續給大家帶來 CSS 在網頁中以及圖形繪製中的使用。這篇文章給大家帶來的是純 CSS 繪製數學中的各種形狀的磚石等。
您可能感興趣的相關文章
Infinity
#infinity { position: relative; width: 212px; height: 100px; } #infinity:before, #infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#diamond { width: 0; height: 0; border: 50px solid transparent; border-bottom-color: red; position: relative; top: -50px; } #diamond:after { content: ``; position: absolute; left: -50px; top: 50px; width: 0; height: 0; border: 50px solid transparent; border-top-color: red; }
Diamond Shield
#diamond-shield { width: 0; height: 0; border: 50px solid transparent; border-bottom: 20px solid red; position: relative; top: -50px; } #diamond-shield:after { content: ``; position: absolute; left: -50px; top: 20px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid red; }
Diamond Narrow
#diamond-narrow { width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid red; position: relative; top: -50px; } #diamond-narrow:after { content: ``; position: absolute; left: -50px; top: 70px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid red; }
Cut Diamond
#cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0; } #cut-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px; }
您可能感興趣的相關文章
本文連結:百變 CSS 系列:純 CSS 繪製三角形(各種方向)
編譯來源:夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
作者:山邊小溪
主站:yyyweb.com 記住啦:)
歡迎任何形式的轉載,但請務必註明出處。
相關文章
- CSS魔法系列:純CSS繪製各種圖形《系列六》CSS
- CSS 魔法系列:純 CSS 繪製三角形(各種角度)CSS
- CSS 繪製各種形狀CSS
- CSS繪製各種幾何圖形形狀效果CSS
- 用css繪製各種形狀CSS
- 純 CSS 建立各種不同的圖形形狀CSS
- CSS魔法系列:純CSS繪製基本圖形(圓、橢圓等)CSS
- CSS繪製各種幾何形狀CSS
- 我是如何用 CSS 繪製各種形狀的CSS
- 如何使用css繪製鑽石CSS
- 使用css繪製圖形CSS
- css繪製特殊圖形CSS
- 好程式設計師web前端學習路線分享純css繪製各種圖形程式設計師Web前端CSS
- 純css繪製三角形CSS
- 史上最強大的40多個純CSS繪製的圖形CSS
- CSS3繪製圖形圖案效果CSSS3
- 強大的CSS:圖形繪製合集,方便你我!CSS
- 如何使用 css 繪製心形CSS
- 【前端幫幫忙】第3期 使用CSS的border屬性繪製各種幾何形狀前端CSS
- Markdown繪製各種圖形———Mermaid語法AI
- OpenGL 學習系列---基本形狀的繪製
- css繪製圓形程式碼例項CSS
- 開始使用SmartDraw繪製開發中的各種圖形
- 純 Css 繪製扇形CSS
- css3繪製柳樹葉形狀程式碼例項CSSS3
- 運用clip-path的純CSS形狀變換CSS
- css3繪製心形圖案程式碼例項CSSS3
- 純CSS漸變繪製 Chrome 圖示CSSChrome
- java:繪製圖形Java
- 奇妙的 CSS shapes(CSS圖形)CSS
- CSS揭祕之形狀CSS
- 純CSS畫的基本圖形(矩形、圓形、三角形、多邊形、愛心、八卦CSS
- css 畫圖形大全CSS
- 45個值得收藏的 CSS 形狀CSS
- CSS滑鼠變成小手形狀CSS
- Python 用 OpenCV 繪製基本圖形系列(總)PythonOpenCV
- 純css畫三角形CSS
- 奇妙的CSSshapes(CSS圖形)CSS