通过CSS的border绘制三角形-html tutorial-php.cn

通过CSS的border绘制三角形

WBOY

Lepaskan： 2016-09-20 03:30:01

asal

1201 orang telah melayarinya

通过css的border 可以绘制出三角形, 不同的样式组合，有着不同的效果，可以控制它的大小，颜色，方向。看下面各种图形，相信可能还有很多图形，大家都没见过。

先写出公共的样式：

<span style="color: #008080;">1</span> <span style="color: #800000;">.border </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">4</span>     
<span style="color: #008080;">5</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;"> transparent</span>;
<span style="color: #008080;">6</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;"> 1rem</span>;
<span style="color: #008080;">7</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;"> solid</span>;
<span style="color: #008080;">8</span> }

Salin selepas log masuk

在上面的css基础上，添加下面的组合代码，将可以控制三角形的方向：

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913160720

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913160755

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913160824

<span style="color: #008080;">1</span> <span style="color: #800000;">border-bottom-color: #000;</span>

Salin selepas log masuk

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913160859

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161235

<span style="color: #008080;">1</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-top-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161246

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-top-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161302

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-bottom-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161504

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161517

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-bottom-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161314

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-right-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161326

<span style="color: #008080;">1</span> <span style="color: #800000;">border-bottom-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-right-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161415

<span style="color: #008080;">1</span> <span style="color: #800000;">border-top-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-bottom-color: #000;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161447

还有下面的这个效果，

<span style="color: #008080;">1</span> <span style="color: #800000;">border-left-color: #000;
</span><span style="color: #008080;">2</span> <span style="color: #800000;">border-right-color: #000;
</span><span style="color: #008080;">3</span> <span style="color: #800000;">border-left-width: 3rem;</span>

Salin selepas log masuk

qq%e6%88%aa%e5%9b%be20160913161537

不同的组合产生不同的效果，大家可以尝试各种组合带来的效果。