如何使用css繪制鉆石的方法

2024-07-11 08:42:29

字體：大中小

來源：轉載

供稿：網友

聽說你想要鉆石: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 加一下特效