如何用css3实现设计的特殊异形

最近有需求要实现带有一个特殊小箭头的聊天气泡和内圆弧透明活动入口；

效果如下：

肯定有人会说用图片直接切出来不是很so easy 嘛！

但是有没有想过，不用图片怎么实现，去网上搜一下；

果不其然就有一些结果，但是点进去看一下大部分都是用一个div压着另一个div用颜色压住，但是无法实现我的需求；

开始还真是有点 困惑，不过仔细思索了一下，原来还是如此so easy！

需求关键点：

要透明，而且还是要圆弧状，仔细观察灰色半透明气泡左下角是一个带圆弧的尖尖的;
另一个是圆盘跟右侧黄色块是一个内圆弧而且内圆弧要透明，像一个月牙铲。

不卖关子了，直接说我自己琢磨的方案吧！

原理：

为了方便看轮廓我设置背景blue；

1、首先我们先实现一个扇形，通过css的border实现扇形圆弧，见图一红色块；

2、其次在实现的扇形外面加一个容器div定义宽高，设置overflow:hidden,不设置背景，通过相对定位实现红色圆弧的切割；

3、隐藏后的红块旋转180度后跟需求气泡左下角的设计完美匹配图二；

再看看需求的第二个设计，内圆弧透明；

把父容器定义的宽跟扇形的内圆弧一样宽，设置属性overflow:hidden,通过相对定位切个上面左边和右边，
效果如图三，旋转90度后跟需求二的关键位置圆盘跟黄色块相接的部分模拟出来；

如上原理解说，两个需求的关键点已解决剩下的不说了！

后面附上基本代码，自己调试test-out dom的宽高和旋转角度，调试test dom的left、top以及旋转，寻找切割的位置，实现图二和图三；

图一

图二

图三

代码部分

// html部分
<div class='test-out'>
    <div class='test'></div>
</div>

// css部分
.test-out {
    width: 34px;
    height: 40px;
    position: relative;
    overflow: hidden; // 父容器隐藏切掉不需要的部分
    transform: rotate(0deg);  // 通过旋转做出自己想要的角度，这里默认只给了个0，自己调
}
.test {
    position: absolute;
    left: -10px;
    top: 0;
    width: 100px;
    height: 100px;
    border-width: 50px; // 通过border实现扇形
    border-style: solid;
    border-color: #f00 transparent transparent transparent;
    border-radius:100px;
    transform: rotate(0deg);  // 通过旋转做出自己想要的形状，这里默认给了个0，自己调
}
复制代码