整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这是我们最开始的代码及效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 50px;
background: #1b6f9b;
text-align: center;
line-height: 50px;
font-size: 1.5em;
color: white;
}
</style>
</head>
<body>
<div class="box">TRAPEZOID</div>
</body>
</html>这里的想法是把上图中的目标想象成一个3D的目标，然后如果能往图里旋转一下，映射在屏幕上的就是梯形了，因此：
transform: perspective(.5em) rotateX(5deg);由于我们是对整个元素应用3D变形，因此上面的文字也变形了。
这里需要注意的是，对元素使用了3D变形之后，其内部的变形效果是“不可逆转的”，这一点跟2D变形不同，在2D变形的体系下，内部的逆向变形可以抵消外部的变形效应。
因此我们可以这么做，用伪元素
<style>
.box{
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 1.5em;
color: white;
margin-left: 20px;
position: relative;
}
.box::before{
content: '';
position: absolute;
top:0;right: 0;left: 0;bottom: 0;
z-index: -1;
background: #1b6f9b;
transform: perspective(.5em) rotateX(5deg);
}
</style>这个方法确实可以生成一个基本的体型，但因为我们没有设置transform-origin，应用变形效果会让这个元素以它自身的中心线为轴进行空间上的旋转。因此，元素投射到2D屏幕上的尺寸会发生多种变化。
为了让它的尺寸更好的掌握，我们可以为它指定transform-origin:bottom；当它在3D空间中旋转时，可以把它的底边固定住。
transform-origin: bottom;现在它看起来直观多了，只有高度会发生变化。不过这样一来，高度的缩水就会变得更加显眼，因为现在整个元素是转离屏幕前的观众；而在这之前，元素的上半部分会转向屏幕后面，而下半部分会转出屏幕。
这里，我们通过变形属性来改变它的尺寸：
在前端开发中经常会用到很多的简易图形，例如三角形，箭头，圆形等。有很多人一开始会想着用小的图片实现，不过这样会增加页面请求次数，延缓页面加载效果。
在CSS中有个border属性，它完全可以达到制作各种简易图形的效果，今天我们就一起来看看吧。
文章中的代码都已经放在了github上，感兴趣的同学自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/border.html
CSS
在制作各种简易图形之前，我们先来看看border属性的使用。
border是一个复合属性。
border-width表示边框宽度。
border-style表示边框样式，设置实线，虚线，点状等。
border-color表示边框颜色，还可以设置transparent，表示透明。
border又分为上下左右四个方向，每个方向都占据各自的空间，不会出现重叠的地方，尤其是在四个方向的边框都设置的情况下，在四个角处也不会出现重叠。
我们来看个最简单的例子，在四个方向上都设置边框，赋予不同的颜色。
图片1
通过上面的图片1可以看出，四个角处是分离，没有重合的。
首先我们来看看梯形的效果图。
梯形效果图
我们再来分析下梯形是如何实现的。
因为我们完全是通过border设置，所以这个div的高度应该为0。
梯形的左右两个腰，恰好如同border在角的衔接处，然后将两侧的border-style设置为transparent。
因此我们可以得到以下的CSS代码。
梯形的CSS代码
修改border-left和border-right的宽度值，可以改变梯形的形状。
三角形也分为上下左右四个方向，我们首先来看看总体的形状。
三角形
然后我们也来分析下如何实现这个效果，以下三角形为例。
因为是呈现三角形的形状，刚好契合border在角落的衔接处，因此高度和宽度都应该为0。
下三角形是上部有区域，所以要设置border-top。
border-left和border-right两个方向都要设置宽度，然后设置为透明即可。
因此得到以下的CSS代码，设置不同方向border的宽度，三角形的形状也会跟着变。
下三角形CSS代码
同理，只要掌握了其中一个方向的三角形原理，就会轻松写出其他方向三角形的CSS代码。
这里直接给出上三角形的CSS代码。
上三角形CSS代码
左三角形的CSS代码如下所示。
左三角形CSS代码
右三角形的CSS代码如下所示。
右三角形CSS代码
接下来我们看一种基本的只用border设计的形状。
图形
它的实现方式也很简单，只需要将width和height设置为0，然后将border四个方向的宽度设置成一样的即可。
得到的代码如下所示。
CSS代码
基于上述的实现，我们可以得到左下，左上，右上，右下四种三角形。
首先看看基本形状。
直角三角形
看到图形后，我们很容易发现，只要隐藏掉连接的两个方向的border，显示出另外两个方向的border，就可以得到直角三角形。
这里我们只展示出左上三角形的CSS代码。
左上直角三角形CSS代码
其他方向的直角三角形代码可类比得出，大家可以试一下。
首先我们看看六角星的形状。
六角星
看到这个图形，大家应该能想到可以由上下两个三角形构成，只要将上下两个三角形位置对应准确。
这里为了节省页面元素的空间，我们可以采用伪元素去实现。
将页面显示元素设置为上三角形。
利用:after伪元素设置下三角形。
设置伪元素的position为absolute，调节right和top值。
通过上述分析，我们得到以下CSS代码。
六角星CSS代码
与border属性搭配使用的还有一个很常用的属性，那就是border-radius。
border-radius是专门设置圆角的，可以让90度角变为圆角。
我们首先看看最基本的圆形的样子。
圆形
其实我们只需要将border-radius属性设置为宽或者高的一半以上即可。代码如下所示。
圆形
我们来看看同心圆的样子。
同心圆
同心圆只需要设置一个border边框，给border设置一个特殊的背景色，给div设置成白色背景即可。
同心圆CSS代码
我们来看看半圆的形状。
半圆
半圆的效果是如何实现的呢？
首先元素自身高度设置为0，设定宽度值。
设定上部和右部的border。
设定左上角和右上角的border-radius值。
得到的代码如下所示。
上半圆
同理，下半圆，左半圆和右半圆修改对应的值就可以获得。
今天这篇文章主要通过border属性，画出了一系列简易的图形，这在实际中是很实用的，大家学会了吗?
言
我们组要招一个前端开发，我也借此机会整理了一下前端的基础知识。否则在面试的时候如果被别人问倒了，人家还以为我们公司没有技术大牛的。
在复习CSS基础的时候，我被一个网友的奇思妙想震惊了，居然可以用border来画三角形。在此之前，我都只是用border来打框框的。[流泪][流泪][流泪]
正文
我们比较常规的用法，就是用border属性来设置边框，如下所示：
div {
width: 100;
height: 100;
border: 1px solid;
}现在，为了便于观察，我们将四条边设置为不同的颜色，如下所示：
div {
width: 100;
height: 100;
border-top: 1px solid red;
border-left: 1px solid orange;
border-right: 1px solid green;
border-bottom: 1px solid blue;
}注意，神奇的事情即将发生。将边框加粗，如下所示：
div {
width: 100;
height: 100;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
}看到了吗？出现了4个梯形。接着，将长度和宽度缩小，如下所示：
div {
width: 10;
height: 10;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
}梯形的短边越来越短，直到为0，三角形就出现了。那么，设置长度和宽度为0，如下所示：
div {
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
}此时，四个方向的三角形就形成了，想要展示哪个三角形，只需要将其他三个设置为透明即可，如下所示：
div {
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}甚至，各种三角形、梯形的组合形态都可以随意拼接，如下所说：
div {
width: 0;
height: 0;
border-top:50px solid red;
border-left:50px solid transparent;
border-right:50px solid green;
border-bottom:50px solid transparent;
}div {
width: 100;
height: 0;
border-top:50px solid red;
border-left:50px solid transparent;
border-right:50px solid green;
border-bottom:50px solid transparent;
}div {
width:100;
height:0;
border-top:100px solid red;
border-left:20px solid yellow;
border-right:20px solid green;
border-bottom:0px solid transparent;
}结尾
CSS真是强大啊，感觉只要技术够牛，就可以用CSS画任意图形。最后，附上网友用CSS画的蓝胖子。
*请认真填写需求信息，我们会在24小时内与您取得联系。
