【CSS】画三角形

96
Rabbit_svip
2017.11.27 11:37 字数 404
270924-106.jpg

用CSS画三角形,利用border属性,把一个边设置成看到的样式,其他两边或三边用transparent方法变成透明。


image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 70px solid red;
}



image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 70px solid red;
}



image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 0;
  height: 0;  
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 70px solid red;
}



image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 0;
  height: 0;  
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 70px solid red;
}



image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 0;
  height: 0;  
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}



image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 0;
  height: 0;  
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}



image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 0;
  height: 0;  
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}



image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 0;
  height: 0;  
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}



原理:

首先定义一个div,且div的边框足够厚。

image.png

HTML代码:
<div></div>

CSS代码:

div {
  width: 100px;
   height: 100px;
  background: #15A892;
  border-top: 20px solid #1574A8;
  border-right: 20px solid #E94E65;
  border-bottom: 20px solid #E9D24E;
  border-left: 20px solid #A81574;
}


div的宽和高各位100px,边框为20px,且四边的颜色都不一样。

可以看得出,四边的接合出和四边形成了一个45°,分别看每一条边都是一个梯形。

这时如果把四条边都继续加粗,变成50px。

image.png

这时看分别看四条边所形成的梯形,我们设置边框越粗,梯形的上底就越小。

image.png

如果我们把div的大小设成0,只有边框的话。如下图所示:

image

可以看出是有4个等腰三角形组成一个正方形。

这时如果把其他三个边都变成透明(使用transparent),同时把div的背景色去掉,最终就只会看到一个三角形。

image.png

需要注意的是,如果要做一个上图这种朝向的三角形(设置底边的颜色),对边可以不设置,但相邻两边一定要设置厚度和实线(solid),同时相邻两边要设置成透明色(transparent)。





希望以上笔记对大家有帮助。
我的其他笔记在微信公众号:Rabbit_svip

image
HTML&CSS
Web note ad 1