CSS 样式画三角形

下面是一些三角形样式，部分我在仿站练习时，用到了的图案，加了点颜色美化，记录一下…
<h2>各种三角形的效果图和代码记录</h2>
<strong>三角形，倒三角形，左三角形，右三角形</strong>
<h2><span style=“color:#f44336;”><strong>上三角</strong></span></h2>
<strong>效果图：</strong>
<br >
<img src=“http://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-931-shang.png” alt=“” />
<br >
<strong>代码样式：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>#triangle{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid #f44336;
}</code></pre>
<h2><span style=“color:#2196f3;”><strong>右三角</strong></span></h2>
<strong>效果图：</strong>
<br >
<img src=“http://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-931-you.png” alt=“” />
<br >
<strong>代码样式：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>#triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:100px solid #2196f3;
}</code></pre>
<h2><span style=“color:#e91e63;”><strong>下三角</strong></span></h2>
<strong>效果图：</strong>
<br >
<img src=“http://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-931-xia.png” alt=“” />
<br >
<strong>代码样式：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>#triangle{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid #e91e63;
}</code></pre>
<h2><span style=“color:#9c27b0;”><strong>左三角</strong></span></h2>
<strong>效果图：</strong>
<br >
<img src=“http://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-931-zuo.png” alt=“” />
<br >
<strong>代码样式：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>#triangle{
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-right:100px solid #9c27b0;
}</code></pre>

<h2><span style=“color:#ff5722;”><strong>左上直角三角形</strong></span></h2>
<strong>效果图：</strong>
<br >
<img src=“http://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-931-zuoshang.png” alt=“” />
<br >
<strong>代码样式：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>#triangle{
width: 0px;
height: 0px;
margin: 10px 10px;
float: left;
border-right: 100px solid transparent;
border-top: 100px solid #ff5722;
}</code></pre>
<h2><span style=“color:#ffca28;”><strong>右上直角三角形</strong></span></h2>
<strong>效果图：</strong>
<br >
<img src=“http://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-931-youshang.png” alt=“” />
<br >
<strong>代码样式：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>#triangle{
width: 0px;
height: 0px;
margin: 10px 10px;
float: left;
border-left: 100px solid transparent;
border-top: 100px solid #ffca28;
}</code></pre>
<h2><span style=“color:#4caf50;”><strong>右下直角三角形</strong></span></h2>
<strong>效果图：</strong>
<br >
<img src=“http://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-931-youxia.png” alt=“” />
<br >
<strong>代码样式：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>#triangle{
width: 0px;
height: 0px;
margin: 10px 10px;
float: left;
border-right: 100px solid transparent;
border-bottom: 100px solid #4caf50;
}</code></pre>
<h2><span style=“color:#009688;”><strong>左下直角三角形</strong></span></h2>
<strong>效果图：</strong>
<br >
<img src=“http://moshanghua.oss-cn-shanghai.aliyuncs.com/images/msh-931-zuoxia.png” alt=“” />
<br >
<strong>代码样式：</strong>
<pre class=“line-numbers language-css”><code class=“language-css”>#triangle{
width: 0px;
height: 0px;
margin: 10px 10px;
float: left;
border-left: 100px solid transparent;
border-bottom: 100px solid #009688;
}</code></pre>