日度归档:2020年5月1日

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


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

“锁”形状,在html开发中我们经常用到,如:**** 单据被锁定,此时我们可以在单据后面加一把小锁,那么如何使用css代码在html上绘制“锁”形状呢?

实现思路:
一个锁是由两个圆角长方形和一个椭圆组成,所以我们在html下绘制这三个形状,然后就可以组成一个锁。
如下所示:

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

<meta charset='utf-8' />
<p>
maomao365.com <br />
css 绘制 "锁" 示例分享<br />
----<br />
将div转换为“锁”形状的方法分享
</p>
<hr />
<style> 
#suo {
  font-size: 8px;
  position: relative;
  width: 18em;
  height: 13em;
  border-radius: 2em;
  top: 10em;
  box-sizing: border-box;
  border: 3.5em solid red;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
  margin: 0 0 6rem 0;
}
#suo:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 2.5em solid green;
  width: 14em;
  height: 12em;
  left: 50%;
  margin-left: -7em;
  top: -12em;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
#suo:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid blue;
  width: 5em;
  height: 8em;
  border-radius: 2.5em;
  left: 50%;
  top: -1em;
  margin-left: -2.5em;
}
</style>  
<div id="suo"> 
</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>
#shizijia {
  margin-left:80px;
  background:blue;
  height:130px;
  position:relative;
  width:18px; 
}
#shizijia:after {
  background:green;
  content: "";
  height: 18px;
  left: -55px;
  position: absolute;
  top:50px;
  width: 130px;
}
</style>  
<div id="shizijia"> 
</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>
 #yuanzhui {
  width: 0;
  height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-top: 120px solid green;
  border-radius: 50%;
}
</style>  
<div id="yuanzhui"> 
</div>
css 绘制圆锥示例分享

css 绘制圆锥示例分享