如何用CSS制作图形?

CSS除了可以修饰网页,简练代码之外,还可以用来制作我们常见的图形图像,如三角形,平行四边形,那么如何来制作这些图形呢,下面,就开始我们今天要学习的内容——CSS边框和背景属性:如下图一:

操作方法

  • 01

    例:制作一个三角形。首先在<body>里面添加一个<div>标签。

  • 02

    在头部<head>里输入CSS内部样式

  • 03

    为<div>标签设置宽度(width)和高度(height)

  • 04

    设置边框的宽度( border-width为20px)

  • 05

    设置边框的样式为实线(border-style:soild)

  • 06

    设置边框的颜色( border-color:red transparent transparent)

  • 07

    运行程序,可以看到三角形已经成功输出了!

(0)

相关推荐

  • CSS技巧分享:如何用css制作横排二级下拉菜单

    看到网站的导航按钮很炫酷不会怎么办?本片教程介绍如何使用css制作网站导航横排二级下拉菜单 操作方法 01 打开Notepad++,先输入个页面框架 <!DOCTYPE html> < ...

  • 如何用excel制作课程表

    如何用excel制作课程表的方法1:新建一个excel表格,打开工作表 如何用excel制作课程表的方法2:选中A1~F10的单元格,接下来我们对其进行边框设置.右键-单元格设置 如何用excel制作 ...

  • 如何用PS 制作书本小图标

    PS软件主要应用到图片处理.文字排版.图形设计.网页设计.建筑效果图的修饰等多个方面.广泛应用到影像创意.文艺设计.平面设计.网络媒体等多个领域.用PS软件可为设计书籍封面,包括书籍封面右侧图标.所以 ...

  • 如何用PS制作爱心模板

    Photoshop是我们日常工作中,经常用到的一款图像处理软件.今天给大家分享一下,如何用PS制作爱心模板,主要用到自定义工具画出爱心形状,再把图片放入爱心里. 操作方法 01 打开ps软件,新建一个 ...

  • 如何用word2003制作流程图

    如何用word2003制作流程图呢??今天小编给大家说说.... 操作方法 01 打开word2003 02 点击"视图""工具栏"勾选"绘图&quo ...

  • 如何用AI制作半调效果矢量图

    如何用AI制作半调效果矢量图,这是一种主要采用有规律的圆点表现画面的特殊效果,其实用性非常强,今天就教大家的就是用AI来做矢量的半调效果图 操作方法 01 打开AI新建一个图层,图层的大小根据自己需要 ...

  • 如何用PPT制作小图标

    PPT软件.Word软件.excel表格软件应用十分的广泛,现在的WPS演示文稿是PPT软件的更新版本.PPT软件可用于图片处理.视频编辑.各种三维形状的编排.图标的设计等多个方面.用PPT软件设计图 ...

  • 如何用word制作图片

    在我们使用电脑上软件的时候,往往想要用word制作图片,现在就为大家介绍如何用word制作图片. 操作方法 01 打开Word后点击菜单栏里的"插入". 02 选择"形状 ...

  • 如何用PS制作地板砖

    PS软件.办公软件.Cdr排版软件应用范围广泛,在平面设计领域.文字排版领域.图摄影照相领域.影像创意领域应该特别广泛,PS软件可以和三维软件共同来设计整体图画.通过三维3dmax软件制作出三维软件标 ...