如何用 html+css 实现平行四边形,以及气泡框呢?

【效果图】
首先说一下平行四边形,想要做成的效果大致是下面这个样子的
如何用 html+css 实现平行四边形,以及气泡框呢?_第1张图片

【思路】
如果考虑用昨天的方法,利用 border 边界值,就可以分解成 一个右三角+矩形+上三角(这里右,上的意思指的是需要加上颜色显示的边界颜色),但这样就挺复杂了,所以要换一种方法来做

【做法】
其实利用上次说的 css3 的属性 transform 属性来设置

{
    display: inline-block;
    padding: 5px 20px;
    border: 1px solid #44a5fc;
    color: #333;
    transform: skew(-20deg); /* 定义沿着 X 和 Y 轴的 2D 倾斜转换*/
}

【注意】
但是这么做,有个注意的地方就是,如果当前盒子里包裹其他内容,这个其他内容也会跟着旋转,所以为了避免这种效果,需要在内部重新加一个盒子,并对这个盒子进行一个逆向的 transform,这样就实现了平行四边形了,也就是一个属性的事情

【思考】
要是个梯形,该怎么做呢?


接下来再说一下怎么制作一个类似 tooltip 的气泡提示框呢?
【效果图】
先看一下大致的效果
如何用 html+css 实现平行四边形,以及气泡框呢?_第2张图片
【思路】
其实做起来也相当的简单,就是用一个盒子加一个三角形就行,然后控制好定位的问题就可以做到

【做法】
在有一个叫做 rectangle 的盒子,然后在这个盒子里面有一个 trangle 的盒子

    .rectangle{
        position:relative;
        width:150px;
        height:35px;
        background:green;
        border-radius:5px;
        margin:30px auto 0;
        padding: 10px;
        color:white; 
    }
    .rectangle .trangle{
        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变换属性来实现)

你可能感兴趣的:(前端)