css画钻石-如何使用css勾勒砌体轮廓

bendan520 css

2023-09-17 0 6,952 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

据说你想要砖石：宝石：？如果你买不起，不妨用CSS画一个，但如果你敢献给你的女同事，难保不挨打。

晚上两点我们要去相亲。你为什么不把这个送给你的相亲对象呢？

疗效

我们先看一下功效css画钻石，先想想怎么点亮。

上图是已经完成的效果。砖石整体由三角形组成，上面五个，下面三个。上面有五个等腰三角形，其中两个颠倒过来以填补三个之间的空隙。下面是一个等边三角形和两个对称的钝角三角形，差不多就是这样了。（钝角三角形不太好理解，至少我没成功。这里的钝角三角形是通过transform:skew()使用等边三角形实现的）

知识点

本演示涉及 CSS3 变换、CSS 三角形绘制以及如何为 CSS 绘制的三角形添加边框。三角形边框形成砖石的边缘和拐角（蓝色腰线）。预处理语言较少。

三角形边框：我们知道css画钻石，三角形最初是画有边框的。给三角形添加边框相当于给边框添加边框。这种做法肯定行不通。这就是我所做的：画一大一小两个三角形。小的比大的小1px。然后将小三角形覆盖在大三角形前面，这样就只露出大三角形的1px。视觉效果就是变成了一个内在的小。三角形边框线消失了。参考博客文章

开始

多姆计划

三角形的数量是上面五个，下面三个。请忽略命名

形状

砌体上部

首先定义通用样式

#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;
    }
  }
  // 数学不好，这个角度是我试了几次试出来的，数学好的可以算下呢，啊哈哈哈

都写在笔记里了。不要追究细节，不要问为什么。