Bubble box

The small triangle of the bubble box can be implemented with the pseudo-elements ::before ::after: HTML code:

<div class="box">
    <div class="publickStyle back">filling</div>
    <div class="publickStyle emptyPub top">top</div>
    <div class="publickStyle emptyPub right">right</div>
    <div class="publickStyle emptyPub bottom">bottom</div>
    <div class="publickStyle emptyPub left">left</div>
  </div>
Copy the code

The CSS part:

 .box {
    width: 100%;
    height: 100%;
    padding-left: 50px;
  }
  .publickStyle {
    width: 200px;
    height: 50px;
    border-radius: 5px 5px;
    text-align: center;
    line-height: 50px;
    position: relative;
  }
  .back {
    background: skyblue;
    color: #fff;
  }
  .back::after {
    position: absolute;
    left: 100%;
    top: 50%;
    border: 5px solid transparent;
    border-left-color: skyblue;
    content: '';
    margin-top: -5px;
  }
  .emptyPub {
    width: 196px;
    border:2px solid skyblue;
    color: skyblue;
    margin-top: 20px;
  }
  .top::before {
    position: absolute;
    top: -18px;
    left: 50%;
    border: 8px solid transparent;
    border-bottom-color: skyblue;
    content: '';
    margin-left: -5px;
  }
  .top::after {
    position: absolute;
    top: -14px;
    left: 50%;
    border: 7px solid transparent;
    border-bottom-color: #fff;
    content: '';
    margin-left: -4px;
  }
  .right::before {
    position: absolute;
    left: 100%;
    top: 50%;
    border: 5px solid transparent;
    border-left-color: skyblue;
    margin: -5px 0 0 2px;
    content: '';
  }
  .right::after {
    position: absolute;
    left: 100%;
    top: 50%;
    border: 4px solid transparent;
    border-left-color: #fff;
    content: '';
    margin-top: -4px;
  }
  .bottom::before {
    position: absolute;
    left: 50%;
    top: 100%;
    border: 8px solid transparent;
    border-top-color: skyblue;
    margin-left: -4px;
    content: '';
  }
  .bottom::after {
    position: absolute;
    left: 50%;
    top: 100%;
    border: 5px solid transparent;
    border-top-color: #fff;
    margin-left: -1px;
    content: '';
  }
  .left::before {
    position: absolute;
    top: 50%;
    left: 0;
    border: 7px solid transparent;
    border-right-color: skyblue;
    content: '';
    margin-left: -16px;
    margin-top: -6px;
  }
  .left::after {
    position: absolute;
    top: 50%;
    left: 0;
    border: 6px solid transparent;
    border-right-color: #fff;
    content: '';
    margin-left: -12px;
    margin-top: -5px;
  }
Copy the code

Concave rounded corners

At the beginning of my work, I used SVG to achieve concave rounded corners, although the effect is good, but at that time, I also thought whether it could be achieved through pure CSS, later I read a lot of big guys’ articles, and found that it was so clever and interesting to achieve through CSS. I just happened to record it through this more textual activity. Mainly through the radial-gradient implementation, by adjusting the proportion of parameters to achieve the desired effect. HTML code:

<div class="box">
    <div class="tab">
      <div class="yuanjiao yuanjiao_left"></div>
      <div class="tab1"></div>
      <div class="yuanjiao yuanjiao_right"></div>
    </div>
    <div class="bottom"></div>
  </div>
Copy the code

Main CSS code:

.box {
  width: 200px;
  height: 100px;
}
.tab {
  width: 80px;
  height: 20px;
  margin: 0 auto;
  display: flex;
}
.tab1 {
  width: 60px;
  height: 100%;
  background: skyblue;
  border-radius: 5px 5px 0 0;
}
.yuanjiao {
  width: 10px;
  height: 10px;
  background: skyblue;
  margin-top: 10px;
}
.yuanjiao_left {
  background: skyblue;
  background: radial-gradient(circle at -5% 0%, transparent 60%, transparent 75%, skyblue 35%);
}
.yuanjiao_right {
  background: radial-gradient(circle at 100% 10%, transparent 50%, transparent 75%, skyblue 35%);
}
.bottom {
  width: 100%;
  height: 30px;
  background: skyblue;
}
Copy the code



References:

Github.com/cssmagic/bl…

Codepen. IO/JowayYoung /…

cssarrowplease.com/