搜 索

用css与div代码绘制一些常见的各种形状的图形

编辑:QTOOL.NET日期:2020-02-14764

在制作网页的时候我们为了增添页面的美观性,会在页面中添加一些图案或者将页面部分区块设置为特殊形状.

如果全部使用图片会使页面体积增大,造成加载速度慢等问题,那么怎样使用div+css实现一些简单的图形绘制呢?

在div+css布局时,我们一般是在页面中绘制一个个矩形,然后使用浮动来控制页面中矩形所在的位置

代码如下:

<div class="juxing"></div>

<style type="text/css">

.juxing {

  width: 500px;

  height: 100px;

}

</style>

需要用css绘制一个简单的小三角形

代码如下:

<div class="csssanjiaoxing"></div>

<style type="text/css">

.csssanjiaoxing {

  width: 0;

  height: 0;

  border-bottom: 140px solid #f335f7;

  border-left: 70px solid transparent;

  border-right: 70px solid transparent;

}

</style>

圆形图形代码:

<div class="yuanxing"></div>

<style type="text/css">

.yuanxing {

  width: 180px;

  height: 180px;

  background: #f335f7;

  -moz-border-radius: 90px;

  -webkit-border-radius: 90px;

  border-radius: 90px;

}

</style>

css实现棱形绘制:

<div class="lengxing"></div>

<style type="text/css">

.lengxing {

  width: 180px;

  height: 180px;

  background: #f335f7;

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  transform: rotate(-45deg);

  -webkit-transform-origin: 0 100%;

  -moz-transform-origin: 0 100%;

  -ms-transform-origin: 0 100%;

  -o-transform-origin: 0 100%;

  transform-origin: 0 100%;

  margin: 60px 0 10px 310px;

}

</style>

除了上述代码,还可以使用在本站站长工具栏目中的css形状生成工具,来预览以及获取各种常见图形的css代码

我们只需要在页面中打开它,然后选择一个自己需要的图形,程序会自动显示该图形的css代码

将代码复制到页面css文件中,然后将.cssshape替换为需要变为特殊形状的div类名称或id名称,如果是指定id的div则替换为为#XXXX。

TAG标签:网页布局
此文章由QTOOL.NET编辑
最新文章

热门标签