css绘制常见的一些图形(线条、箭头、三角形、矩形、圆、椭圆、平行四边形、菱形、梯形)

最新推荐文章于 2025-03-11 11:10:45 发布

假装文艺浪

最新推荐文章于 2025-03-11 11:10:45 发布

阅读量2.5w

点赞数 19

分类专栏： Html/Css 文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/qq_41971356/article/details/118101003

版权

Html/Css 专栏收录该内容

1 篇文章

订阅专栏

最近写的内容需要绘制一些图形，在此做下记录（请自动对view标签进行转换div）

<view></view> //等同于<div></div>

线段的绘制

线段有直线以及虚线

直线（实线）

先说说直线的绘制，这个是非常简单的，给一个div，设置宽高，给背景色即可，如下

//html
<view class='line'>
</view>
//css
.line {
 	width: 1000px;
  	height: 3px;
  	background-color: #9ea7aa;
}

实现效果如下
在这里插入图片描述
width控制线条长度，height控制线条的粗细程度
而除了实线外，还有虚线段

直线（虚线）

不知道对于虚线的绘制，你首先会想到那个属性，我想的是border

//html
<view class='line'>
</view>
//css
.line {
 	width: 1000px;
  	border-bottom:3px dashed rgb(0, 0, 0)
}

如下图
border虚线图
可以看出，虚线的间隔以及虚线段的长度是相同的，且我们无法去干涉其间隔长度以及线段长度的修改。
想一下，有其他实现虚线的方法吗？
（想过一个div下多个同级元素，固定长度及margin值，同行显示来实现虚线段，但这种方法太…）,那有其他属性可以使用吗？先上图

我是用何种方式实现上图效果呢，使用了background相关的一些内容

background-image: linear-gradient(direction, color-stop1, color-stop2, …);
默认情况下是从上到下的线性渐变
background-image: linear-gradient(to right, color-stop1, color-stop2, …), to right 即从左到右的线性渐变
background-size: 100px 20px; 指定背景图像的大小
background-repeat: repeat-x; 沿着X轴方向铺满

使用线性渐变从左到右绘制一条短的线段（有色和透明两种），通过background-size控制线段的长度及粗细，background-repeat控制平铺方向，来构成一条目标虚线段

代码如下

/html
<view class='line'>
</view>
//css
.line {
 	width: 1000px;
 	height: 3px;
	background-image: linear-gradient(to right, #9ea7aa 80%, transparent 20%);
	background-size: 100px 100%; // 线段长度 线段粗细
	// background-repeat: no-repeat; // 激活则为一短线段
	background-repeat: repeat-x;
}

箭头的绘制

关于箭头的绘制，这里绘制单箭头和双箭头的效果

单箭头

在这里插入图片描述
效果实现代码如下,箭头可以看做是一条长线拼接三角形组合而成，我这里使用了伪类after来实现箭头部分，运用实现三角形的方式来实现箭头的效果。（下面有三角形的实现分析）

// html
	<div class="singleArrow">
 	</div>
// css
	.singleArrow {
		width: 200px;
		height: 10px;
		position: relative;
		background-color: #15ff00;
		/* transform: rotate(-40deg); */  /* 旋转角度 */
	}
	.singleArrow::after {
		content: '';
		display: block;
		position: absolute;
		right: -20px;  /* 箭头位置 */
		top: -5px;  /* 箭头位置 */
		border-top: 10px solid transparent; 	/* 箭头高低 */
		border-bottom: 10px solid transparent; /* 箭头高低 */
		border-left: 20px solid #00b9f7; /* 箭头长度*/
	}

双箭头

所谓双箭头即左右两端各有一个箭头，如图

与单箭头类似，还是三角形拼接，不过这里是用来两个伪类，before 和 after
实现代码如下

	// html
	<div class="doubleArrow"></div>
	//css
	.doubleArrow {
		width: 200px;
		height: 10px;
		position: relative;
		background-color: #9ea7aa;
		transform: rotate(-40deg);
	}
	.doubleArrow::before {
		content: '';
		display: block;
		position: absolute;
		right: -19px;
		top: -5px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 20px solid #9ea7aa;
	}
	.doubleArrow::after {
		content: '';
		display: block;
		position: absolute;
		left: -20px;
		top: -5px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-right: 20px solid #9ea7aa;
	}

三角形的绘制

我们对实现三角形的过程进行一个简单的分析
先看下面一段代码

// html
<div class="analyze"></div>
// css
.analyze{
	position:relative;
	height: 40px;
	width: 40px;
	border-top: 50px solid #ff0000;
	border-left: 50px solid #ffff00;
	border-right:50px solid #00aaff;
	border-bottom: 50px solid #00FF7F;
}

实现效果如下：
三角形实现的分析
从上图可以看出，当元素无宽高时，下面的矩形完全有border(边框)撑开，而且四个边框都是三角形，那么让其余边的颜色为透明，即可实现三角形的绘制。

直角三角形

在这里插入图片描述

在这里插入图片描述
实现代码如下：

	// html
	<div class="rightTriangle" ></div>
	// css
	.rightTriangle {
	  width: 0;
	  height: 0;
	  // border-top: 200px solid red; 
	  border-top: 200px solid transparent;
	  border-right: 0px solid transparent;
	  border-bottom: 0px solid transparent;
	  border-left: 300px solid #9ea7aa;
  }

观察上侧两图并结合代码可知，宽高为0px，靠边框宽度撑开，给左侧边框300px，上边框200px，两者形成一个300*200的矩形，右侧边框及下侧边框无值，会陷进去，形成以左上到右下对角线分割的上下两部分（两个直角三角形），给其中一个颜色置空，即可得到一个直角三角形。

三角形

在这里插入图片描述
结合代码从图中可以看出，左图当将border-top边框宽度为0且其他三条边框宽度有值时，会形成其他三条边框各自为三角形拼接以矩形，当把左右两侧的边框的色值去除时，就只会显示中间的三角形，如右图，显示底边框形成的三角形，还是个等腰三角形
效果实现代码如下：

   //html
   <div class="triangle"></div>
   <div class="triangle1"></div>
   // css
  .triangle {
	  width: 0;
	  height: 0;
	  border-top: 0px solid transparent;
	  border-right: 50px solid #169cf5;
	  border-bottom: 200px solid #ecb706;
	  border-left: 50px solid #acff26;
  }
  .triangle1 {
	  width: 0;
	  height: 0;
	  border-top: 0px solid transparent;
	  border-right: 50px solid transparent;
	  border-bottom: 200px solid #ecb706;
	  border-left: 50px solid transparent;
  }

矩形

矩形的话就非常的简单了，一个div，给宽高，加颜色就是一个矩形了，
圆角矩形的话使用border-radius属性即可设置
图我就不给了

// html
<div class="box"></div>
// css
.box {
	width: 200px;
	height: 200px;
	background-color: #cccccc;
	// border-radius： 10px; // 圆角矩形
}

圆

圆形的话，和上面的圆角矩形一个路子，因为圆的半径相同，所以给宽高一致即可，只需将border-radius的值设为50%即可，也不给图了

// html
<div class="box"></div>
// css
.box {
	width: 200px;
	height: 200px;
	background-color: #cccccc;
	border-radius： 50%; 
}

椭圆

椭圆的话就像一个压扁的圆，它x轴及y轴的长度不同，在上圆的基础上，将宽高设置不一致即可，无图。

// html
<div class="box"></div>
// css
.box {
	width: 300px;
	height: 200px;
	background-color: #cccccc;
	border-radius:50%; 
}

梯形的实现

先简单的分析下
在这里插入图片描述
上图有三个盒子，分别有宽高、有宽、无宽高三种，四条边分别给宽度和不同的色值，来进行对比，可以发现，无宽高的情况下四条边为上面提过的三角形，有宽高为四个梯形，无高是为两梯形和三角形。在无高情况下，我们将
实现代码如下

//html
 <div class="tx"></div>
  <div class="tx1"></div>
  <div class="tx2"></div>
//css
.tx {
    margin:100px 0 0 100px;
    width: 200px;
    height: 100px;
    background-color: #ccc;
    border-top: 50px solid rgb(238, 255, 0);
	  border-right: 50px solid rgb(94, 255, 0);
	  border-bottom: 50px solid rgb(4, 133, 238);
	  border-left: 50px solid rgb(255, 17, 0);
  }
  .tx1 {
    margin:20px 0 0 100px;
    width: 200px;
    height: 0;
    background-color: #ccc;
    border-top: 50px solid rgb(238, 255, 0);
	  border-right: 50px solid rgb(94, 255, 0);
	  border-bottom: 100px solid rgb(4, 133, 238);
	  border-left: 50px solid rgb(255, 17, 0);
  }
  .tx2 {
    margin:20px 0 0 100px;
    width: 0;
    height: 0;
    border-top: 50px solid rgb(238, 255, 0);
	  border-right: 50px solid rgb(94, 255, 0);
	  border-bottom: 100px solid rgb(4, 133, 238);
	  border-left: 50px solid rgb(255, 17, 0);
  }

从上图可以看出，当给边框不同色值是，且盒子有宽高，各个边框就是一个梯形（这里的数值拼成的是等腰梯形），那么将其他三条边的边框隐去，中间部分也隐去，就得到一个梯形。

梯形

梯形实现过程
上图从左到右是我们一步步实现一个梯形的过程，分别对应下面tx1、tx2、tx3的代码结构，可以看出，只给了宽度无高度，高度为边框宽度撑开，从左到右分别去除了border-top的宽度，border-left、border-right的色值(宽度必须保留，若去除，就一矩形)。还可以三角形矩形拼接的形式实现题型。
实现代码如下

// html
<div class="tx1"></div>
<div class="tx2"></div>
<div class="tx3"></div>
// css
.tx1 {
    width: 200px;
    height: 0;
    border-top: 50px solid rgb(238, 255, 0);
	border-right: 50px solid rgb(94, 255, 0);
	border-bottom: 100px solid rgb(4, 133, 238);
	border-left: 50px solid rgb(255, 17, 0);
}

.tx2 {
    width: 200px;
    height: 0;
    border-top: 0px solid rgb(238, 255, 0);
	border-right: 50px solid rgb(94, 255, 0);
	border-bottom: 100px solid rgb(4, 133, 238);
	border-left: 50px solid rgb(255, 17, 0);
}

.tx3 {
    width: 200px;
    height: 0;
    border-top: 0px solid rgb(238, 255, 0);
	border-right: 50px solid transparent;
	border-bottom: 100px solid rgb(4, 133, 238);
	border-left: 50px solid transparent;
}

直角梯形

实现了梯形，直角梯形就好办了，其一使用矩形和一个三角形拼接直角梯形，其二就在tx3的基础上，做些调整即可
在这里插入图片描述
仅将左右两条边框选择一条去除即可(宽度为0)
实现代码如下

.tx4 {
    width: 200px;
    height: 0;
    /* background-color: #ccc; */
    border-top: 0px solid rgb(238, 255, 0);
	border-right: 0px solid transparent;
	border-bottom: 100px solid rgb(4, 133, 238);
	border-left: 50px solid transparent;
  }

圆角梯形

那圆角梯形如何实现呢，使用border-radius直接设置？
在这里插入图片描述
如果直接设置border-radius，你会得到上面的图，圆角梯形？这压根不沾好吧
那为何如此？先捋一遍，我们是用边框宽度撑开得到的矩形，对矩形进行了分割得到的梯形，所以设置border-radius是给整个矩形设置的圆角，当除去多余部分后，就得到了上图。那该如何实现圆角矩形呢？

这里要使用其他的概念，透视、投影，同一块物体在不同角度观测到的结果是不同的
电脑屏幕是一个坐标平面(x,y),你视角和屏幕组成了一个空间坐标线，垂直于屏幕的方向为Z轴方向（即你视线到屏幕），屏幕横向是为X轴，纵向视为Y轴，想想一下这个空间坐标系。
主要使用视觉透视的效果来展现梯形,投影效果
perspective：简单来说就是视距，视觉距目标的距离（一叶障目不见泰山）
perspective属性需要与rotateX()，rotateY()，rotateZ()这三个属性配合着用，所以我们先从这三个属性入手。

在这里插入图片描述
上图是在x轴上旋转45度，并设置了透视属性，看右侧图形，将框去除，是不是一个梯形？实现代码如下,那再给个border-radius不就时候圆角梯形？如下图

	// html
	<div class="box">
      <div class="boxs"></div>
    </div>
    <div class="box1">
      <div class="box1s"></div>
    </div>
 // css
.box {
  margin: 200px 0 0 200px;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
.boxs {
  width: 200px;
  height: 200px;
  opacity: 0.5;
  transform: rotateX(45deg);
  background-color: rgb(230, 17, 17);
}
.box1 {
  margin: 200px 0 0 200px;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
.box1s {
  width: 200px;
  height: 200px;
  opacity: 0.5;
  transform: perspective(150px) rotateX(45deg);
  background-color: rgb(230, 17, 17);
}

在这里插入图片描述

菱形的实现

先搞清菱形的特征
一个四条边都相等的平行四边形
对角线垂直，且对角线两侧完全一致（照镜子）

通过正方形

先说第一种实现方法，通过正方形的旋转（正方形完全符合菱形的性质、特点）

transform: rotate(‘deg’)

实现方式如下：

// html
<div class="analyze"></div>
// CSS
.analyze{
	height: 100px;
	width: 100px;
  	transform: rotate(45deg);
	background-color: #ffaaff;
}

正方形的旋转是一个特殊的情况，对角线是相等的，那对角线不等的情况该如何实现呢

保留四条边相等的原则，再次对正方形进行调整

需要使用的属性时倾斜，也是transform的一个属性 skew(x,y)

实现方法如下

// html
<div class="analyze"></div>
// CSS
.analyze{
	height: 100px;
	width: 100px;
  	transform: rotateZ(45deg)skew(15deg,15deg);
	background-color: #ffaaff;
}

不过以上两种实现菱形的方法比较适合静态的图形，那如何实现一个可以根据宽高而变化的菱形呢？

三角形拼接

第二种方法两个等腰三角形(等边三角形)组合到一块就是一个菱形，我上面又进行三角形的实现，这里也是一样的，将两个三角形进行拼接即可

先分析一下
在这里插入图片描述
看图且结合下列代码，矩形分为上下两部分,top 和 bottom 两个div不需要给宽高，只靠边框宽度撑起即可，top中，上边框宽度为 0，且透明，即不存在上边框，下边框宽度为box元素高度的一半(50%)，给颜色值，top中，左右两侧边框宽度给值为box宽度的一半(50%),我这里给了左右边框颜色值，给透明值即可得到一个等边三角形。将上下两个三角形拼接到一块即可。

// html
<div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
// css
 .box {
    margin-left: 200px;
    margin-bottom: 200px;
    width: 200px;
    height: 300px;
    border: 1px solid rgb(0, 0, 0);
  }
  .top {
    border-top: 0 solid #85d;
    border-right: 100px solid rgb(85, 144, 221);
    border-left: 100px solid rgb(230, 77, 6);
    border-bottom: 150px solid rgb(221, 146, 85)

  }
  .bottom {
    border-top: 150px solid #85d;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 0 solid #85d
  }

下图是一些其他的值，如若向使其动态的改变，如下图从左到右的手动变形，则需要写行内式的方式实现,代码如下

通过 border-top-color 、border-right-color、border-bottom-color、border-left-color控制边框颜色
border-style: solid | deash 等属性来控制边框的样式
通过 border-top-width、border-right-width、border-bottom-width、border-left-width控制边框宽度
通过你自己定义的变量值的变化来实现菱形的变形，自己写对应的方法

<view>
  <view
    :style="{
      borderRightColor: 'transparent',
      borderLeftColor: 'transparent',
      borderBottomColor: greapFillColor,
      borderTopColor: greapFillColor,
      borderStyle: 'solid',
      borderLeftWidth: moveLocal.x +'px',
      borderRightWidth: moveLocal.x +'px',
      borderTopWidth: 0+ 'px',
      borderBottomWidth: moveLocal.y /2+'px',
    }"
  >
    
  </view>
  <view
    :style="{
      borderRightColor: 'transparent',
      borderLeftColor: 'transparent',
      borderBottomColor: greapFillColor,
      borderTopColor: greapFillColor,
      borderStyle: 'solid',
      borderLeftWidth: moveLocal.x +'px',
      borderRightWidth: moveLocal.x +'px',
      borderTopWidth: moveLocal.y/2 + 'px',
      borderBottomWidth: 0+'px',
    }"
  >
    
  </view>
</view>