| css绘制常见的一些图形(线条、箭头、三角形、矩形、圆、椭圆、平行四边形、菱形、梯形) | 您所在的位置：网站首页 › 直线的线怎样写 › css绘制常见的一些图形(线条、箭头、三角形、矩形、圆、椭圆、平行四边形、菱形、梯形) |
css绘制常见的一些图形(线条、箭头、三角形、矩形、圆、椭圆、平行四边形、菱形、梯形)
|
css常见的图形绘制
线段的绘制直线（实线）直线（虚线）
箭头的绘制单箭头双箭头
三角形的绘制直角三角形三角形
矩形圆椭圆梯形的实现梯形直角梯形圆角梯形
菱形的实现通过正方形三角形拼接
结束语
最近写的内容需要绘制一些图形，在此做下记录（请自动对view标签进行转换div） //等同于 线段的绘制 线段有直线以及虚线 直线（实线）先说说直线的绘制，这个是非常简单的，给一个div，设置宽高，给背景色即可，如下 //html //css .line { width: 1000px; height: 3px; background-color: #9ea7aa; }实现效果如下 不知道对于虚线的绘制，你首先会想到那个属性，我想的是border //html //css .line { width: 1000px; border-bottom:3px dashed rgb(0, 0, 0) }如下图 我是用何种方式实现上图效果呢，使用了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 //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; } 箭头的绘制关于箭头的绘制，这里绘制单箭头和双箭头的效果 单箭头
所谓双箭头即左右两端各有一个箭头，如图 我们对实现三角形的过程进行一个简单的分析 先看下面一段代码 // html // 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; }实现效果如下：
观察上侧两图并结合代码可知，宽高为0px，靠边框宽度撑开，给左侧边框300px，上边框200px，两者形成一个300*200的矩形，右侧边框及下侧边框无值，会陷进去，形成以左上到右下对角线分割的上下两部分（两个直角三角形），给其中一个颜色置空，即可得到一个直角三角形。 三角形
矩形的话就非常的简单了，一个div，给宽高，加颜色就是一个矩形了， 圆角矩形的话使用border-radius属性即可设置 图我就不给了 // html // css .box { width: 200px; height: 200px; background-color: #cccccc; // border-radius： 10px; // 圆角矩形 } 圆圆形的话，和上面的圆角矩形一个路子，因为圆的半径相同，所以给宽高一致即可，只需将border-radius的值设为50%即可，也不给图了 // html // css .box { width: 200px; height: 200px; background-color: #cccccc; border-radius： 50%; } 椭圆椭圆的话就像一个压扁的圆，它x轴及y轴的长度不同，在上圆的基础上，将宽高设置不一致即可，无图。 // html // css .box { width: 300px; height: 200px; background-color: #cccccc; border-radius:50%; } 梯形的实现先简单的分析下 从上图可以看出，当给边框不同色值是，且盒子有宽高，各个边框就是一个梯形（这里的数值拼成的是等腰梯形），那么将其他三条边的边框隐去，中间部分也隐去，就得到一个梯形。 梯形
实现了梯形，直角梯形就好办了，其一使用矩形和一个三角形拼接直角梯形，其二就在tx3的基础上，做些调整即可 那圆角梯形如何实现呢，使用border-radius直接设置？ 这里要使用其他的概念，透视、投影，同一块物体在不同角度观测到的结果是不同的 电脑屏幕是一个坐标平面(x,y),你视角和屏幕组成了一个空间坐标线，垂直于屏幕的方向为Z轴方向（即你视线到屏幕），屏幕横向是为X轴，纵向视为Y轴，想想一下这个空间坐标系。 主要使用视觉透视的效果来展现梯形,投影效果 perspective： 简单来说就是视距，视觉距目标的距离（一叶障目不见泰山） perspective属性需要与rotateX()，rotateY()，rotateZ()这三个属性配合着用，所以我们先从这三个属性入手。
先说第一种实现方法，通过正方形的旋转（正方形完全符合菱形的性质、特点） transform: rotate(‘deg’) 实现方式如下：
// html
// CSS
.analyze{
height: 100px;
width: 100px;
transform: rotate(45deg);
background-color: #ffaaff;
}
正方形的旋转是一个特殊的情况，对角线是相等的，那对角线不等的情况该如何实现呢 保留四条边相等的原则，再次对正方形进行调整 需要使用的属性时倾斜，也是transform的一个属性 skew(x,y) 实现方法如下
// html
// CSS
.analyze{
height: 100px;
width: 100px;
transform: rotateZ(45deg)skew(15deg,15deg);
background-color: #ffaaff;
}
不过以上两种实现菱形的方法比较适合静态的图形，那如何实现一个可以根据宽高而变化的菱形呢？ 三角形拼接第二种方法两个等腰三角形(等边三角形)组合到一块就是一个菱形，我上面又进行三角形的实现，这里也是一样的，将两个三角形进行拼接即可 先分析一下 下图是一些其他的值，如若向使其动态的改变，如下图从左到右的手动变形，则需要写行内式的方式实现,代码如下 通过 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控制 边框宽度通过你自己定义的变量值的变化来实现菱形的变形，自己写对应的方法 |
width控制线条长度，height控制线条的粗细程度 而除了实线外，还有虚线段
可以看出，虚线的间隔以及虚线段的长度是相同的，且我们无法去干涉其间隔长度以及线段长度的修改。 想一下，有其他实现虚线的方法吗？ （想过一个div下多个同级元素，固定长度及margin值，同行显示来实现虚线段，但这种方法太…）,那有其他属性可以使用吗？先上图 
效果实现代码如下,箭头可以看做是一条长线拼接三角形组合而成，我这里使用了伪类after来实现箭头部分，运用实现三角形的方式来实现箭头的效果。（下面有三角形的实现分析）
与单箭头类似，还是三角形拼接，不过这里是用来两个伪类，before 和 after 实现代码如下
从上图可以看出，当元素无宽高时，下面的矩形完全有border(边框)撑开，而且四个边框都是三角形，那么让其余边的颜色为透明，即可实现三角形的绘制。
实现代码 如下：
结合代码从图中可以看出，左图当将border-top边框宽度为0且其他三条边框宽度有值时，会形成其他三条边框各自为三角形拼接以矩形，当把左右两侧的边框的色值去除时，就只会显示中间的三角形，如右图，显示底边框形成的三角形，还是个等腰三角形 效果实现代码如下：
上图有三个盒子，分别有宽高、有宽、无宽高三种，四条边分别给宽度和不同的色值，来进行对比，可以发现，无宽高的情况下四条边为上面提过的三角形，有宽高为四个梯形，无高是为两梯形和三角形。在无高情况下，我们将 实现代码如下
上图从左到右是我们一步步实现一个梯形的过程，分别对应下面tx1、tx2、tx3的代码结构，可以看出，只给了宽度无高度，高度为边框宽度撑开，从左到右分别去除了border-top的宽度，border-left、border-right的色值(宽度必须保留，若去除，就一矩形)。还可以三角形矩形拼接的形式实现题型。 实现代码如下
仅将左右两条边框选择一条去除即可(宽度为0) 实现代码如下
如果直接设置border-radius，你会得到上面的图，圆角梯形？这压根不沾好吧 那为何如此？先捋一遍，我们是用边框宽度撑开得到的矩形，对矩形进行了分割得到的梯形，所以设置border-radius是给整个矩形设置的圆角，当除去多余部分后，就得到了上图。那该如何实现圆角矩形呢？
上图是 在x轴上旋转45度，并设置了透视属性，看右侧图形，将框去除，是不是一个梯形？实现代码如下,那再给个border-radius不就时候圆角梯形？如下图
看图且结合下列代码，矩形分为上下两部分,top 和 bottom 两个div不需要给宽高，只靠边框宽度撑起即可，top中，上边框宽度为 0，且透明，即不存在上边框，下边框宽度为box元素高度的一半(50%)，给颜色值，top中，左右两侧边框宽度给值为box宽度的一半(50%),我这里给了左右边框颜色值，给透明值即可得到一个等边三角形。将上下两个三角形拼接到一块即可。【本文地址】