如何使用css繪製鑽石
摘要：
聽說你想要鑽石:gem:？買不起，還是用css來畫一個吧，但你敢送給自己女朋友，不保證不被打。
下午兩點要相親，要不把這個送相親物件？
效果
先看下效果吧，想一想怎麼構圖先。
上圖是已經完成的效果。鑽石整體都是由三角形構成，上五下三。上邊是五個等邊三角形，...
聽說你想要鑽石:gem:？買不起，還是用css來畫一個吧，但你敢送給自己女朋友，不保證不被打。
下午兩點要相親，要不把這個送相親物件？
效果
先看下效果吧，想一想怎麼構圖先。
上圖是已經完成的效果。鑽石整體都是由三角形構成，上五下三。上邊是五個等邊三角形，其中有2個是倒扣過來填補三個之間的空缺。下邊是一個等腰三角形和2個對稱的鈍角三角形，差不多就是這樣。（鈍角三角形不是太好理解，至少我沒成功，這裡的鈍角三角形是用等腰三角形通過 transform: skew() 實現的）
知識點
這個demo中涉及到了css3 的 transform , css 畫三角形 以及 如何給css畫出的三角形加邊框 ，三角形的邊框構成了鑽石的稜角（白色的線條），預處理語言使用的是 less 。
三角形的邊框：我們知道，三角形本來就是用 border 畫的，給三角形加邊框相當於給 border 加 border ,這個做法肯定行不通。我是這樣做的：畫2個三角形，一個大的一個小的，小的比大的小 1px ,然後小的蓋在大的上面，這樣大三角形就只漏出 1px ,視覺效果就是成為了內部小三角形的邊框線了。參考博文
開始
dom準備
<div id="diamond"> <div class="t"> <div class="common top"></div> <div class="common top"></div> <div class="common top"></div> <div class="common top"></div> <div class="common top"></div> </div> <div class="b"> <div class="common bottom bottom1"></div> <div class="common bottom bottom2"></div> <div class="common bottom bottom3"></div> </div> </div> 複製程式碼
三角形的個數是上五下三。
請忽略命名，please
樣式
鑽石上部分
先把 common 的樣式定義出來
#diamond {
margin: 100px;
.t { //直接定義了高度免去了清除浮動
height:30px;
}
.common { // 公共樣式
position:relative;
float:left;
width:0;
height:0;
border-style:solid; // 元素本身做大三角形，襯底成為小三角形的邊框
&:after { // 偽元素定義小三角形
content: '';
position:absolute;
border-style:solid;
}
}
div.top { // 鑽石頂部的5個三角形特定樣式
border-width:0 30px 30px; // 三角形大小
border-color:transparent transparent #fff; // 三角形顏色
&:after { // 小三角形
top:1px; // 移動三角形使之蓋在底部的大的三角形
left:-28px;
border-width:0 28px 28px; // 小三角形的大小定義
border-color:transparent transparent red;
}
&:nth-child(2n) { // 第二個第四個三角形倒立。
transform:rotate(180deg);
}
&:nth-child(n+2) { // 從第二個開始都向左移動30px
margin-left: -30px;
}
}
}
複製程式碼
在樣式中都做了註釋，不再贅述 ，
我會說我趕時間去相親？
到這呢效果只有鑽石上面的部分。如下圖：
鑽石下部分
// 上部分的樣式省略了
div.bottom {
border-width:90px 30px 0 30px; // 高度適當的高點，這裡給了90px
border-color:#fff transparent transparent; // 三角形向下，底色白色
&:after { // 同上，做出內部紅色的小三角形，尺寸稍小，漏出白色的“邊框線”
border-width:88px 28px 0 28px;
border-color:#f00 transparent transparent;
top:-89px;
left:-28px;
}
/*
*到這應該是三個等腰三角形
*第一個第三個三角形應該要是鈍角三角形的。
*所以要進行一下傾斜操作
*/
&.bottom1 { // 底部第一個三角形傾斜轉換
transform: skew(33.5deg);
transform-origin: 100% 0;
}
&.bottom3 { // 底部第三個三角形傾斜轉換，與第一個對稱
transform: skew(-33.5deg);
transform-origin: 100% 0;
}
}
// 數學不好，這個角度是我試了幾次試出來的，數學好的可以算下呢，啊哈哈哈
複製程式碼
註釋裡都寫了。
不贅述不贅述，別問為什麼。
差不多就是這樣了，上一下效果。
我會說這就是一開始的效果圖？
總覺得差點什麼，duangduang 加一下特效
buling buling的效果，啊哈哈哈哈哈哈。