如何使用css繪製鑽石

芬達Tz發表於2019-02-08
CSS

聽說你想要鑽石?？買不起，還是用css來畫一個吧，但你敢送給自己女朋友，不保證不被打。

下午兩點要相親，要不把這個送相親物件？

效果

先看下效果吧，想一想怎麼構圖先。

如何使用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;
    }
  }
}

複製程式碼

在樣式中都做了註釋，不再贅述 ， 我會說我趕時間去相親？ 到這呢效果只有鑽石上面的部分。如下圖：

如何使用css繪製鑽石

鑽石下部分

// 上部分的樣式省略了
 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;
    }
  }
  // 數學不好，這個角度是我試了幾次試出來的，數學好的可以算下呢，啊哈哈哈
複製程式碼

註釋裡都寫了。不贅述不贅述，別問為什麼。

差不多就是這樣了，上一下效果。

如何使用css繪製鑽石

我會說這就是一開始的效果圖？ 總覺得差點什麼，duangduang 加一下特效

如何使用css繪製鑽石

buling buling的效果，啊哈哈哈哈哈哈。

ps

張鑫旭大神部落格中有 不包含鑽石稜角的實現，在第26個圖形中。 地址在此

祝新年快樂，萬事順意。願往後的生活沒有相親和IE瀏覽器。

效果已出，感謝閱讀。 原始碼在此 或訪問 我的部落格

相關文章