疑问框,css 矩形两边挖半圆

<div class="rectangle">疑问框</div>
css:
/圆角矩形/
.rectangle{
width: 200px;
border-radius: 15px;
position: relative;
}
/小三角/
.rectangle::before{
content: "";
width: 0;
height: 0;
border: 15px solid red;
border-color: red transparent transparent transparent;
position:absolute;
bottom: -30px;
left: 40px;
}

css 矩形两边挖半圆

css:
.bound{
background-color: #3EAAF2;
width: 300px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;//设置定位
}
.bound::before{
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
background: #fff;
position: absolute;
top:50%;
left: -20px;
transform:translateY(-50%);
}
.bound::after{
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
display: block;
background: #fff;
position: absolute;
top:50%;
right: -20px;
transform:translateY(-50%);
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容