使用CSS画出漂亮的弧线_css 弧线

使用css实现上图中的漂亮弧形，代码如下：

          <div class="tip">
            <div class="top">
              <img src="/img/visitmobile/tipicon.png" alt=""/>
              <div class="tiptext">
                <span>预约成功!</span>
                <span>来访预约成功，请准时来访!</span>
              </div>
            </div>
          </div>
1
2
3
4
5
6
7
8
9

      .tip {
        width: 220px;
        height: 275px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -195px 0 0 -110px;
        border-radius: 10px;
        background-color: #fff;
        overflow: hidden;
        z-index: 9999;
        display: none;
        .top {
          width: 220px;
          height: 135px;
          border: 1px solid #409eff;
          border-radius: 0 0 45% 45%/0 0 35% 35%;
          border-top: none;
          background-color: #409eff;
        }
        }
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22