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%);
}

 

html:

<div class="bound"></div>

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-04-24
  • 2021-10-15
  • 2021-04-14
  • 2021-08-30
  • 2022-01-10
  • 2022-12-23
猜你喜欢
  • 2022-02-08
  • 2021-06-03
  • 2021-05-29
  • 2022-12-23
  • 2022-02-06
  • 2022-12-23
相关资源
相似解决方案