三角形
写 css 的时候,用惯了背景图,忽略了 css 本身其实可以实现很多简单的基本图形,比如三角形:
.triangle {
border-style: solid;
border-width: 20px;
border-color: #000 transparent transparent;
width: 0px;
height: 0px;
}
效果图:
百思不得qijie,为啥宽高为 0,却能显示一个三角形?平常的边框,看上去都是四条直线,其实不然,修改三角型代码,展示其两条边为例:
.triangle {
border-style: solid;
border-width: 20px;
border-color: #000 blue transparent transparent;
width: 50px;
height: 50px;
}
效果图:
恍然大悟,原来边框其实是等腰梯形!
那么还可以做其他哪些图形(以下代码摘自 the shapes of css)?
圆形
#circle {
width: 200px;
height: 200px;
background: red;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
主要利用了 border-radius
属性,将矩形圆角化。其值可以使用长度(px
),也可以使用百分比。百分比会转化成长度,比如此例中,50% 表示 水平圆角半径=宽度*50%
,垂直圆角半径=高度*50%
所以直接写 100px
也是等价的。
平行四边形
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(160deg);
-moz-transform: skew(160deg);
-o-transform: skew(160deg);
background: red;
}
利用 transform
倾斜特性如下:
向x轴方向(水平向右)倾斜 160°:可以想象为矩形的右侧边沿着逆时针方向旋转 160°(当旋转 90° 时,四条边重合,图形会消失;当旋转超过 90° 时,类似对称;当旋转超过 180° 时,便类似转圈了)
向 y 轴方向(水平向下)倾斜,可以想象为矩形底边沿着顺时针方向旋转。
五角形
是时候提高下难度了,我们来看下怎么画五角形⭐️?五角星可以看成是由三个等腰三角形组成。
三角形三个角分别是 36°、36°、108°,此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border
,其实角度是可控的,如下所示:
width: 10px;
height:10px;
border-right: 100px solid green;
border-bottom: 70px solid red;
border-top: 20px solid blue;
border-left: 50px solid black;
通过给边框设置不同的长度,会影响到边框的形状:以上图红色三角形为例它的底边长为 border-left + border-right
;高中学习的余弦定理得知:通过已知三角形的角度和任意一边的长度,可以确定三角形的形状。所以理论上,通过控制一个 div
三条 border
的长度,进而实现不同大小的三角形是可行。实践了一番,由于很难得到一个整数值,所以通过这种方法画正五角形几乎是无法实现的。
原文的代码如下(很惊讶原作者是如何算出来这些边框宽度的):
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
其他有趣的图形
钻石
通过一个梯形和一个三角形组合而成
吃豆人
一个圆形,隐藏右侧边
对话框
一个三角形,加一个圆角矩形
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。