How to achieve curved top pointer

前端 未结 3 1342
醉酒成梦
醉酒成梦 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:21

    Use pseudo element where you apply a radial-gradient:

    .box {
      margin:60px 10px 0;
      display:inline-block;
      color:#fff;
      text-align:center;
      padding:10px 30px;
      background:green;
      border-radius:50px;
      position:relative;
    }
    .box:before {
      content:"";
      position:absolute;
      bottom:100%;
      left:50%;
      width:60px;
      height:25px;
      transform:translateX(-50%);
      background:
        radial-gradient(farthest-side at top left , transparent 98%,green 100%) left,
        radial-gradient(farthest-side at top right, transparent 98%,green 100%) right;
      background-size:50.2% 100%;
      background-repeat:no-repeat;
    }
    
    body {
     background:pink;
    }
    text here
    more and more text here
    2 lines
    of text

    Another idea in case you want any kind of coloration:

    .box {
      margin:60px 10px 0;
      display:inline-block;
      color:#fff;
      text-align:center;
      padding:10px 30px;
      background-image:linear-gradient(60deg,yellow,purple,green,blue);
      background-size:100% calc(100% + 25px);
      background-position:bottom;
      border-radius:50px;
      position:relative;
      z-index:0;
    }
    .box:before {
      content:"";
      position:absolute;
      z-index:-1;
      bottom:0;
      left:0;
      right:0;
      height:calc(100% + 25px);
      background-image:inherit;
      -webkit-mask:
        radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
        radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
      mask:
        radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
        radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
      -webkit-mask-size:30px 25px;
      mask-size:30px 25px;
      -webkit-mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
      mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
      -webkit-mask-repeat:no-repeat;
      mask-repeat:no-repeat;
    }
    
    body {
     background:pink;
    }
    text here
    more and more text here
    2 lines
    of text

提交回复
热议问题