乐趣区

关于css:使用CSS画三角形border

用 CSS 画三角形,利用 border 属性,把一个边设置成看到的款式,其余两边或三边用 transparent 办法变成通明。

一、案例

HTML 代码:

<div></div>

CSS 代码:

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

HTML 代码:

<div></div>

CSS 代码:

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

HTML 代码:

<div></div>

CSS 代码:

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

HTML 代码:

<div></div>

CSS 代码:

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

HTML 代码:

<div></div>

CSS 代码:

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

HTML 代码:

<div></div>

CSS 代码:

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

HTML 代码:

<div></div>

CSS 代码:

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

HTML 代码:

<div></div>

CSS 代码:

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

二、原理

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

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。

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

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

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

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

须要留神的是,如果要做一个上图这种朝向的三角形(设置底边的色彩),对边能够不设置,但相邻两边肯定要设置厚度和实线(solid),同时相邻两边要设置成通明色(transparent)。

退出移动版