整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這是我們最開始的代碼及效果：
<!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小時內與您取得聯系。
