月度归档:2020年04月

css 如何在html页面上输出一个“菱形”形状呢?


摘要:
下文讲述使用css脚本在页面上绘制一个“菱形”形状的方法分享,如下所示:

“菱形”是我们常见的形状,那么如何使用css代码在html上绘制此形状呢?

实现思路:
1.绘制一个上三角形
2.绘制一个下三角形
3.上三角形和下三角形进行叠加,形成一个菱形
如下所示:

例:
使用css绘制一个“菱形”形状的示例分享

 <meta charset='utf-8' />
<p>
maomao365.com <br />
css 绘制 "菱形" 的示例分享<br />
----<br />
将div转换为“菱形”形状的方法分享
</p>
<hr />
<style>
#lingxing {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: green;
  position: relative;
  top: -50px;
}
#lingxing:after {
  content: '';
  position: absolute;
  left: -50px;
  top: 50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: blue;
}

</style>  
<div id="lingxing">
</div>
css绘制菱形示例分享

css绘制菱形示例分享

css 如何在html页面上输出一个“无穷大”形状呢?


摘要:
下文讲述使用css脚本在页面上绘制一个“无穷大”形状的方法分享,如下所示:

“无穷大”是一种数学符号,那么如何使用css代码在html上绘制此形状呢?

实现思路:
1.绘制一个长方形
2.将长方形前后设置为圆角边框,旋转圆角边框,使其对齐成为一个无穷大的符号
如下所示:

例:
使用css绘制一个“爱心”形状的示例分享

 <meta charset='utf-8' />
<p>
maomao365.com <br />
css 绘制 "无穷大" 的示例分享<br />
----<br />
将div转换为“无穷大”形状的方法分享
</p>
<hr />
<style>
#wuqiongda {
  position: relative;
  width: 212px;
  height: 100px;
  box-sizing: content-box;
}
#wuqiongda:before,
#wuqiongda:after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 20px solid green;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
#wuqiongda:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}
</style>  
<div id="wuqiongda">
</div>
css绘制无穷大的示例分享

css绘制无穷大的示例分享

css 如何在html页面上输出一个“爱心”呢?


摘要:
下文讲述使用css脚本在页面上绘制一个“爱心”形状的方法分享,如下所示:

“爱心”是html中常用的一种形状,那么如何使用css脚本在html上绘制一个”爱心”呢?

 实现思路:
   1.绘制两个长方形 
    并设置长方形的圆角边框
   2.对绘制的长方形进行旋转,拼接处“爱心”形状 
   如下所示:

例:
使用css绘制一个“爱心”形状的示例分享

<meta charset='utf-8' />
<p>
maomao365.com <br />
css 绘制 "爱心" 的示例分享<br />
----<br />
将div转换为爱心形状的方法分享
</p>
<hr />
<style>

#aiXin {
  position: relative;
  width: 100px;
  height: 90px;
}
#aiXin:before,
#aiXin:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background:green;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#aiXin:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
</style>
<div id="aiXin">
</div>
css绘制爱心的方法分享

css绘制爱心的方法分享