CSS实现直⾓三⾓形
如图：这个盒⼦的样式该如何实现：盒⼦只有矩形，圆形，三⾓形，那梯形如何画出来的呢，即通过⼀个浮动的直⾓三⾓形+矩形，就可以形成梯形这种效果了。
理论：直⾓三⾓形，把左边和下边的边框宽度设置为0，把上边框宽度调⼤，即可得到
CSS代码如下
/*代码简写如下*/
.box{
width: 0;
height: 0;
/*边框颜⾊*/
border-color: transparent skyblue transparent transparent;
/*边框样式*/
border-style: solid;borderbox
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>
效果如图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。