使用css绘制图形

学习&实践爱好者

已于 2022-10-02 09:03:20 修改

阅读量1.3k

点赞数

分类专栏： HTML5与CSS3 前端开发文章标签： css 前端 html

于 2022-09-27 21:45:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/127068182

版权

HTML5与CSS3 同时被 2 个专栏收录

78 篇文章 14 订阅

订阅专栏

前端开发

64 篇文章 4 订阅

订阅专栏

使用css绘制图形

预备知识

CSS，指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一门技术。

css入门容易，想学深还是挺难的， CSS涉及的内容太多了，从https://www.w3schools.cn/css/可以直观的感受到。CSS 样式定义多，属性很多，不同属性的组合会有不同的效果，不直观，无法像编程那样推测结果，需要大量试验试出来，靠经验积累。所以学习参考一些例子，有助于加快学习了解，开始时不要追求全面深入理解，通过逐步接触练习，慢慢就会熟悉并生巧。

【CSS快速入门 https://blog.csdn.net/cnds123/article/details/112976663 】

CSS中有一个重要概念选择器，因为本文用到，先介绍一下。

CSS中，选择器用来指定网页上我们想要样式化的HTML元素。

有了选择器就可以把你想要的那个元素选中方式，为这个元素添加CSS样式。

css选择器的种类是有很多的，如

ID选择器（如：id="name"）。

类选择器（如：class=" line"）。

【注：id属性具有唯一性，也就是说在一个页面中相同的id只能出现一次。与id属性具有唯一性不同，可以为同一个页面的相同元素或者不同元素设置相同的class。】

标签选择器（如：body,div,p,ul,li）。

等等。【可参见 https://blog.csdn.net/cnds123/article/details/125926256 】

css绘制图形用到的属性（Property）简要介绍

【详见 CSS 参考手册 https://www.w3schools.cn/cssref/default.asp】

margin 属性设置元素的外边距。margin 属性设置元素的边距，是以下属性的简写属性：

margin-top

margin-right

margin-bottom

margin-left

该属性可使用 1 到 4 个值：

如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px

如果规定两个值，比如 div {margin: 50px 10px} - 上下外边距是 50px，左右外边距是 10 px。

如果规定三个值，比如 div {margin: 50px 10px 20px}- 上外边距是 50 px，而左右外边距是 10 px，下外边距是 20 px。

如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。

可设置如下值：

auto - 默认。浏览器计算高度和宽度。

length - 以 px、cm 等定义高度/宽度。

% - 以包含块的百分比定义高度/宽度。

initial - 将高度/宽度设置为默认值。

inherit - 从其父值继承高度/宽度。

【长度单位

许多 CSS 属性接受"长度"值，诸如 width、margin、padding、font-size 等。

长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。

数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。

对于某些 CSS 属性，允许使用负的长度。

长度单位有两种类型：绝对单位和相对单位。区别是使用的单位：绝对长度单位如cm、mm、px，相对长度单位如 em、rem、%。】

border 简写属性（shorthand property）在一个声明设置元素的所有的边框属性。

可以按顺序设置如下属性：

border-width

border-style (必须)

border-color

如果省略边框颜色，则应用的颜色将是文本的颜色。

border-color 属性设置一个元素的四个边框颜色。此属性可以有一到四个值。

使用css绘制图形

html部分，设置放置图形的容器——如用<div> 标签设置文档中的一个区域。<div class=' shape'></div>

css部分，定义形状样式规则。要绘制一个长方形（只有外框线，没有内部填充），样式规则如下：

.shape {

height:100px;

width:200px;

border:2px solid;

border-color: red green blue pink;

}

完整代码如下：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>css绘制长方形</title>

<style>
.shape {
    height:100px;
    width:200px;
    border:2px solid;
    border-color: red green blue pink;
 }
</style>
</head>
<body>
<div class='shape'></div>
</body>
</html>

运行效果：

线段的绘制

线段有实线段以及虚线段

html部分，定义容器：

css部分，定义形状样式规则：

.line {

margin-top:50px;

width: 100px;

border-top:2px dashed red; /* 实线solid ；虚线dashed 或dashed */

}

完整代码如下：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>css画线段</title>

<style>
.line {
    margin-top:50px;   	
    width: 100px;  
    border-top:2px dashed red; /* 实线solid  ；虚线dashed 或dashed */
}
</style>
</head>
<body>
<div class='line'></div>
</body>
</html>

运行效果

三角形的绘制

为便于初学者理解，我们先从如下情况开始

Html部分

css部分

.shape1{

height: 40px;

width: 40px;

border-top: 50px solid red;

border-right:50px solid green;

border-bottom: 50px solid yellow;

border-left: 50px solid blue;

}

完整代码如下：

<!DOCTYPE html> 
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" /> 
    <title>css画边框</title>
<style>
    .shape1{
	height: 40px;
	width: 40px;
	border-top: 50px solid red;
	border-right:50px solid green;
	border-bottom: 50px solid yellow;
    border-left: 50px solid blue;
    }
</style>
</head>
<body>
<div class="shape1"></div>
</body>
</html>

运行效果如下图左

在上中，红色梯形块代表是上边框宽度，绿色梯形块代表右边框宽度，黄色梯形块代表下边框宽度，蓝色梯形块代表右边框宽度，对几个边距的宽度而言，它们之间的分界恰好是这个正方形的对角线所在的直线，如果里面的小正方形宽高无穷小（将shape样式定义中width和height的属性值均设为0），那么这个图形将是一个由四块不同颜色三角形拼接而成的图形，如上图右：

修改.shape1如下：

.shape1{

height: 40px;

width: 40px;

border-right:50px solid green;

border-bottom: 50px solid yellow;

border-left: 50px solid blue;

}

形成的图形如下图右