如何使用css繪製鑽石

時間 2019-11-08

標籤如何使用 css 繪製鑽石欄目 CSS 简体版

原文原文鏈接

據說你想要鑽石💎？買不起，仍是用css來畫一個吧，但你敢送給本身女友，不保證不被打。css

下午兩點要相親，要不把這個送相親對象？html

效果

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

上圖是已經完成的效果。鑽石總體都是由三角形構成，上五下三。上邊是五個等邊三角形，其中有2個是倒扣過來填補三個之間的空缺。下邊是一個等腰三角形和2個對稱的鈍角三角形，差很少就是這樣。（鈍角三角形不是太好理解，至少我沒成功，這裏的鈍角三角形是用等腰三角形經過transform: skew()實現的）git

知識點

這個demo中涉及到了css3 的 transform, css 畫三角形以及 如何給css畫出的三角形加邊框，三角形的邊框構成了鑽石的棱角（白色的線條），預處理語言使用的是less。github

三角形的邊框：咱們知道，三角形原本就是用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~~hexo

樣式

鑽石上部分

先把common的樣式定義出來less

#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;
    }
  }
}

複製代碼

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

鑽石下部分

// 上部分的樣式省略了
 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;
    }
  }
  // 數學很差，這個角度是我試了幾回試出來的，數學好的能夠算下呢，啊哈哈哈
複製代碼