css 画畸形

Question

css3 如何实现上图的 边角

请大佬 指导一下 对于各种 奇行 的 css3的 画法 思路

Answer 1

先上图

思路：我这个方法比较粗暴，很多css的问题首要要考虑伪元素，合理的利用after和before

  画一个圆角矩形 右上角是一个四分之一圆被 一个白色圆形覆盖

html：<div class="rect"></div>
css：

.rect{
                position: relative;
                width:150px;
                height:30px;
                background:pink;
                border-radius: 15px;
            }
            .rect:after{  //四分之一圆
                display: inline-block;
                content: '';
                position: absolute;
                top: 5px;
                right: -12px;
                width:15px;
                height:15px;
                background: pink;
                border-bottom-right-radius: 15px;
                z-index: 1;
            }
            .rect:before{   //白色圆形
                display: inline-block;
                content: '';
                position: absolute;
                width:15px;
                height:15px;
                border-radius: 50%;
                background: white;
                top: -5px;
                right: -12px;
                z-index: 2;
            }

Answer 2

复杂，没时间=>切图贴上去
复杂，有时间=>canvas
你这要css3的话，可以提供思路，两个小圆，一个绿色，一个白色，白色的稍微小一点
然后这两个圆定位到右上角，具体位置自己调下，然后让白圆盖住绿圆
最后用最外面的椭圆将这两个圆的左边盖住
完事!

Answer 3

.bubble__box {
padding: 10px;
display: inline-block;
background-color: #4cd7c1;
border-radius: 8px;
color: white;
position: relative;
&::before {

content: '';
position: absolute;
border-radius: 10px;
top: 3px;
right: -12px;
width: 20px;
height: 20px;
background: #4cd7c1;

}
&::after {

content: '';
position: absolute;
top: -3px;
right: -15px;
border-radius: 10px;
width: 16px;
height: 15px;
background: white;

}
}

Answer 4

推荐张鑫旭css画气泡

纯css画聊天气泡

 
CSS “边框法”实现气泡对话框效果的高级应用实例页面
代码：
CSS代码：
.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px; 
    border-style:solid; 
    border-color:#ffffff #beceeb #beceeb #ffffff; 
    left:-40px; 
    top:40px;
}
.test span.top{
    border-width:10px 20px; 
    border-style:dashed solid solid dashed; 
    border-color:transparent #ffffff #ffffff transparent; 
    left:-40px; 
    top:60px;
}
HTML代码：
<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果一
</div>
效果：
CSS “边框法”实现气泡对话框效果一
Designed & Powerd by zhangxinxu
Copyright© 张鑫旭-鑫空间-鑫生活

Answer 5

画镰刀？

满足以下几个条件即可

• border-radius: 50%
• width/height 可调节弯曲程度

优点：

不需要考虑父节点背景色

width: 40px;
height: 20px;
border-radius: 50%;
border-left: 10px solid red;
transform: rotate(60deg);

Answer 6

在项目里一般都是图片方便、这样代码多复杂