如何⽤html+css实现平⾏四边形，以及⽓泡框呢？
【效果图】
⾸先说⼀下平⾏四边形，想要做成的效果⼤致是下⾯这个样⼦的
【思路】
如果考虑⽤昨天的⽅法，利⽤ border 边界值，就可以分解成 ⼀个右三⾓+矩形+上三⾓（这⾥右，上的意思指的是需要加上颜⾊显⽰的边界颜⾊），但这样就挺复杂了，所以要换⼀种⽅法来做
【做法】
其实利⽤上次说的 css3 的属性 transform 属性来设置
{
display: inline-block;
padding: 5px 20px;
border: 1px solid #44a5fc;
color:#333;
transform:skew(-20deg); /* 定义沿着 X 和 Y 轴的 2D 倾斜转换*/
}
【注意】
但是这么做，有个注意的地⽅就是，如果当前盒⼦⾥包裹其他内容，这个其他内容也会跟着旋转，所以为了避免这种效果，需要在内部重新加⼀个盒⼦，并对这个盒⼦进⾏⼀个逆向的 transform，这样就实现了平⾏四边形了，也就是⼀个属性的事情
【思考】
要是个梯形，该怎么做呢？
接下来再说⼀下怎么制作⼀个类似 tooltip 的⽓泡提⽰框呢？
【效果图】
先看⼀下⼤致的效果
margin属性怎么用
【思路】
其实做起来也相当的简单，就是⽤⼀个盒⼦加⼀个三⾓形就⾏，然后控制好定位的问题就可以做到
【做法】
在有⼀个叫做 rectangle 的盒⼦，然后在这个盒⼦⾥⾯有⼀个 trangle 的盒⼦
.rectangle{
position:relative;
width:150px;
height:35px;
background:green;
border-radius:5px;
margin:30px auto 0;
padding: 10px;
color:white;
}
.angle{
position:absolute;
top:12px;
right:-16px;
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:transparent transparent transparent green;
}
然后差不多就可以实现了
【注意】
有⼀个注意的地⽅就是 position 的使⽤，在外部盒⼦的是⼀定要使⽤相对定位的
【思考】
需要做⼀个不规则的⼩三⾓呢？（其实应该是类似的，就是⽤不同类型的三⾓形层层的遮罩，或者利⽤ css3 的2D变换属性来实现）

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