向下突出的弧

clipboard.png

  1. .box { 
  2.             width: 250px; 
  3.             margin: auto; 
  4.             overflow: hidden; 
  5.         }
  6.         .home_top { 
  7.             position: relative; 
  8.             width: 100%; 
  9.             height: 100px; 
  10.             text-align: center; 
  11.             line-height: 50px; 
  12.         }
  13.         .home_top:after {
  14.             width: 140%; 
  15.             height: 100px;
  16.             position: absolute; 
  17.             left: -20%; top: 0; 
  18.             z-index: -1; 
  19.             content: ''; 
  20.             border-radius: 0 0 50% 50%; 
  21.             background: linear-gradient(#2CBAF9, #04A9F4); 
  22.         }

向上突出的弧

clipboard2.png

.focus{ 
    position: relative;
}
.focus:after{ 
  position:absolute; 
  left:0; 
  right:0; 
  bottom:-11px; 
  content:""; 
  z-index:1; 
  height:20px; 
  width:100%; 
  border-radius:50%; 
  background:#fff;
}