CSS实现直角三角形

如图：这个盒子的样式该如何实现：盒子只有矩形，圆形，三角形，那梯形如何画出来的呢，即通过一个浮动的直角三角形+矩形，就可以形成梯形这种效果了。

• 理论：直角三角形，把左边和下边的边框宽度设置为0，把上边框宽度调大，即可得到

CSS代码如下

/*代码简写如下*/
.box{width: 0;height: 0;/*边框颜色*/border-color: transparent skyblue transparent transparent;/*边框样式*/border-style: solid;border-width: 100px 50px 0 0 ;
}

推演过程：

1. 画出三角形

.box{width: 0;height: 0;border-top: 50px solid red;border-right: 50px solid skyblue;border-bottom: 50px solid yellowgreen;border-left:  50px solid green;
}

样式如下图：

2. 既然要得到直角三角形，那就意味着把下边的宽度设成0 即可得到:

CSS样式代码：

 .box{width: 0;height: 0;border-top: 50px solid red;border-right: 50px solid skyblue;border-bottom: 0 solid yellowgreen;border-left:  50px solid green;}

3. 但是感觉高度不够，把高度调高一些，就变成了

CSS样式代码：

.box{width: 0;height: 0;border-top: 100px solid red;border-right: 50px solid skyblue;border-bottom: 0 solid yellowgreen;border-left:  50px solid green;
}

5.现在已经得到直角三角形了，那么左侧的三角形如何去掉，还是按照上面的方法，把左边的宽度给成0 效果如图：

CSS样式代码

.box{width: 0;height: 0;border-top: 100px solid red;border-right: 50px solid skyblue;border-bottom: 0 solid yellowgreen;border-left:  0 solid green;
}

6. 现在把上面的三角形颜色改成透明色即可得到单独的直角三角形

CSS样式代码如下：

.box{width: 0;height: 0;border-top: 100px solid transparent;border-right: 50px solid skyblue;border-bottom: 0 solid yellowgreen;border-left:  0 solid green;
}

代码可以进行如下简写：

.box{width: 0;height: 0;/*边框颜色*/border-color: transparent skyblue transparent transparent;/*边框样式*/border-style: solid;border-width: 100px 50px 0 0 ;
}

分割线
如何实现第一个图的样子：
具体的代码如下：

  .box{width: 160px;height: 24px;border: 1px solid red;/*水平居中*/line-height: 24px;}.ms{position: relative;/*文字环绕*/float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-weight: 700 ;margin-right: 9px;}.ms i{position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent white transparent transparent;border-width: 24px 10px 0 0 ;border-style:  solid;}.yj{font-size: 12px;/*灰色*/color: gray;/*删除线*/text-decoration: line-through;}

H5代码：

<div class="box"><span class="ms">￥1650<i></i></span><span class="yj">￥5050</span>
</div>

效果如图：