How to achieve curved top pointer

前端 未结 3 1341
醉酒成梦
醉酒成梦 2021-01-28 12:41

Can anyone please help with this? How to achieve the attached button with CSS only(no image)?

This is my code so far:

3条回答
  •  甜味超标
    2021-01-28 13:19

    you can use the shadow on both rounded pseudos

    .bubble {
      position: relative;
      background: #00aabb;
      border-radius: 0.4em;
      width: 200px;
      height: 100px;
    }
    
    .bubble:after,
    .bubble:before {
      content: "";
      position: absolute;
      height: 3em;
      width: 3em;
      border-radius: 50%;
      top: 100%;
      margin: -1px;
    }
    
    :after {
      left: 50%;
      box-shadow: -0.8em -1.4em 0 -0.5em #00aabb
    }
    
    :before {
      right: 50%;
      box-shadow: 0.8em -1.4em 0 -0.5em #00aabb;
    }

    to understand how it works, give a background to the pseudo and another color to the shadows. You'll be able to reproduce for the sides or the top. It's a matter of the circle size and shadow's size and direction.

提交回复
热议问题