听闻你要想钻石:gem:？买不起，還是用css来画1个吧，但你敢送给自身女盆友，不确保不挨打。
中午两点要相亲，要不把这个送相亲目标？
实际效果
先看下实际效果吧，想想如何构图先。
上图是早已进行的实际效果。钻石总体全是由3角形组成，上5下3。上边是5个等边3角形，在其中有2个是倒扣过来弥补3个之间的空缺。下边是1个等腰3角形和2个对称性的钝角3角形，类似便是这样。（钝角3角形并不是太好了解，最少我没取得成功，这里的钝角3角形是用等腰3角形根据 transform: skew() 完成的）
专业知识点
这个demo中涉及到到了css3 的 transform , css 画3角形 和 怎样给css画出的3角形加边框 ，3角形的边框组成了钻石的棱角（白色的线条），预解决語言应用的是 less 。
3角形的边框：大家了解，3角形原本便是用 border 画的，给3角形加边框非常于给 border 加 border ,这个做法毫无疑问行堵塞。我是这样做的：画2个3角形，1个大的1个小的，小的比大的小 1px ,随后小的盖在大的上面，这样大3角形就只漏出 1px ,视觉效果实际效果便是变成了內部小3角形的边框线了。参照博文
刚开始
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>
3角形的个数是上5下3。 请忽视取名，please
款式
钻石上一部分
先把 common 的款式界定出来
#diamond {
margin: 100px;
.t { //立即界定了高宽比免除了消除波动
height:30px;
}
.common { // 公共性款式
position:relative;
float:left;
width:0;
height:0;
border-style:solid; // 元素自身做大3角形，衬底变成小3角形的边框
&:after { // 伪元素界定小3角形
content: '';
position:absolute;
border-style:solid;
}
}
div.top { // 钻石顶部的5个3角形特殊款式
border-width:0 30px 30px; // 3角形尺寸
border-color:transparent transparent #fff; // 3角形色调
&:after { // 小3角形
top:1px; // 挪动3角形使之盖在底部的大的3角形
left:⑵8px;
border-width:0 28px 28px; // 小3角形的尺寸界定
border-color:transparent transparent red;
}
&:nth-child(2n) { // 第2个第4个3角形倒立。
transform:rotate(180deg);
}
&:nth-child(n+2) { // 从第2个刚开始都向左挪动30px
margin-left: ⑶0px;
}
}
}
在款式中都做了注解，已不赘述 ， 我会说我赶時间去相亲？ 到这呢实际效果仅有钻石上面的一部分。以下图：
钻石下一部分
// 上一部分的款式省略了
div.bottom {
border-width:90px 30px 0 30px; // 高宽比适度的高点，这里给了90px
border-color:#fff transparent transparent; // 3角形向下，底色白色
&:after { // 同上，做出內部鲜红色的小3角形，规格稍小，漏出白色的“边框线”
border-width:88px 28px 0 28px;
border-color:#f00 transparent transparent;
top:⑻9px;
left:⑵8px;
}
/*
* 到这应当是3个等腰3角形
* 第1个第3个3角形应当如果钝角3角形的。
* 因此要开展1下歪斜实际操作
*/
&.bottom1 { // 底部第1个3角形歪斜变换
transform: skew(33.5deg);
transform-origin: 100% 0;
}
&.bottom3 { // 底部第3个3角形歪斜变换，与第1个对称性
transform: skew(⑶3.5deg);
transform-origin: 100% 0;
}
}
// 数学课不太好，这个角度是我试了几回试出来的，数学课好的能够算下呢，啊哈哈哈
注解里都写了。 不赘述不赘述，别问为何。
类似便是这样了，上1下实际效果。
我会说这便是1刚开始的实际效果图？ 总感觉差点儿甚么，duangduang 加1下殊效
buling buling的实际效果，啊哈哈哈哈哈哈。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 ps网页版在线制作_静态网页制作方法_微云网页版_怎么制作一个网页_django网页模板 版权所有 （网站地图） 粤ICP备10235580号