使用CSS绘制基本图形

最新推荐文章于 2022-10-04 18:15:50 发布

ice_i_snow

最新推荐文章于 2022-10-04 18:15:50 发布

阅读量85

点赞数

分类专栏：绘图 web前端 CSS 文章标签： web前端 CSS 绘图

本文链接：https://blog.csdn.net/ice_i_snow/article/details/84178895

版权

web前端同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

绘图

6 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

你懂得，不解释，直接上代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">

	.wraper {
		position: relative;
		float: left;
		width: 150px;
		height: 150px;
		border: 1px solid black;
		padding: 10px;
		margin: 10px;
	}

	.wraper div {
		height: 0px;
	}

	.d1 {
		width: 1px;
		margin: 0 auto;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 100px solid;
		color: red;
	}

	.d2 {
		width: 50px;
		margin: 0 auto;
		border-bottom: 100px solid;
		color: orange;
	}

	.d3 {
		width: 50px;
		margin: 0 auto;
		border-left: 30px solid transparent;
		border-right: 30px solid transparent;
		border-bottom: 100px solid;
		color: blue;
	}
	
	.d4 {
		width: 1px;
		margin: 0 auto;
		border-left: 50px solid transparent;
		border-bottom: 100px solid;
		color: green;
	}
	
	.d5 {
		width: 1px;
		margin: 0 auto;
		border-right: 50px solid transparent;
		border-bottom: 100px solid;
		color: gray;
	}

  </style>
 </head>

 <body>
  <div class="wraper">
	<div class="d1"></div>
  </div>
  <div class="wraper">
	<div class="d2"></div>
  </div>
  <div class="wraper">
	<div class="d3"></div>
  </div>
  <div class="wraper">
	<div class="d4"></div>
  </div>
  <div class="wraper">
	<div class="d5"></div>
  </div>
 </body>
</html>

显示的结果：