CSS繪製各種幾何圖形形狀效果

admin發表於2018-07-14
CSS

大家都知道CSS具有強大的功能，能夠讓頁面變得美觀靚麗，隨著CSS的版本的提高，功能也越來越強大。

下面介紹一下如何使用CSS實現各種幾何圖形效果。

一.實現正方形:

[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:100px;
  height:100px;
  background-color:green;
}
</style>
</head>
<body>
<div class="mytest"></div>
</body>
</html>

二.實現矩形:

[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以下的瀏覽器不支援。

[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: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以下的瀏覽器不支援。

[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: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>

五.實現三角形:

以下程式碼可以根據實際需要設定其他方向的角北京色為白色，就可以實現某一方向為三角形。

[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以下的瀏覽器不支援。

[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;
  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以下的瀏覽器不支援。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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>

八.提示框:

[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>

相關文章