Draw triangles through CSS borders-HTML Tutorial-php.cn

Draw triangles through CSS borders

WBOY

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

Original

1204 people have browsed it

Triangles can be drawn through the CSS border. Different style combinations have different effects, and its size, color, and direction can be controlled. Look at the various graphics below. I believe there may be many more graphics that you have never seen.

Write the public style first:

<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> }

Copy after login

Based on the above css, add the following combination code to control the direction of the triangle:

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

Copy after login

Draw triangles through CSS borders

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

Copy after login

Draw triangles through CSS borders

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

Copy after login

Draw triangles through CSS borders

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

Copy after login

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

<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>

Copy after login

Draw triangles through CSS borders

Also this effect below,

<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>

Copy after login

Draw triangles through CSS borders

Different combinations produce different effects. You can try the effects brought by various combinations.