如何利用CSS实现各种几何图形形状效果_html/css

首頁

web前端

html教學

如何利用CSS实现各种几何图形形状效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

如何利用CSS实现各种几何图形形状效果:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
大家都知道CSS具有强大的功能，能够让页面变得美观靓丽，随着CSS的版本的提高，功能也越来越强大，下面简单介绍一下如何使用CSS实现各种几何图形效果。
一.实现正方形:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:100px;  height:100px;  background-color:green;}</style></head><body><div class="mytest"></div></body></html>

二.实现矩形:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:150px;  height:100px;  background-color:green;}</style></head><body><div class="mytest"></div></body></html>

三.实现圆形:
IE8和IE8以下的浏览器不支持。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:100px;  height:100px;  background:green;  -moz-border-radius:50px;  -webkit-border-radius:50px;  border-radius:50px;}</style></head><body><div class="mytest"></div></body></html>

四.实现椭圆形:
IE8和IE8以下的浏览器不支持。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:200px;  height:100px;  background:green;  -moz-border-radius:100px / 50px;  -webkit-border-radius:100px / 50px;  border-radius:100px / 50px;}</style></head><body><div class="mytest"></div></body></html>

五.实现三角形:
以下代码可以根据实际需要设置其他方向的角北京色为白色，就可以实现某一方向为三角形。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:0px;  height:0px;  border-left:100px solid green;  border-right:100px solid black;  border-bottom:100px solid red;  border-top:100px solid blue;}</style></head><body><div class="mytest"></div></body></html>

六.平行四边形:
IE8和IE8以下的浏览器不支持。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  width:150px;  height:100px;  margin-left:20px;  -webkit-transform: skew(20deg);  -moz-transform: skew(20deg);  -o-transform: skew(20deg);  background:green;}</style></head><body><div class="mytest"></div></body></html>

七.鸡蛋形状:
IE8和IE8以下的浏览器不支持。

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest{  display:block;  width:126px;  height:180px;  background-color:green;  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}</style></head><body><div class="mytest"></div></body></html>

八.提示框:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.parent{  width:300px;  height:100px;  margin:40px auto;  background-color:green;  position:relative;}.square{  width:0px;  height:0px;  border-bottom:10px solid white;  border-left:10px solid white;  border-right:10px solid green;  border-top:10px solid green;  position:absolute;  left:-20px;  top:10px;}</style></head><body><div class="parent">  <div class="square"></div></div></body></html>

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/591.html

最原始地址是:http://www.softwhy.com/

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

See all articles