JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="skeletonBalloonWrap">
    <div class="skeletonBalloon"></div>
    <div class="skeletonBeak"></div>
</div>

CSS

.skeletonBalloonWrap{
  position: relative;
  margin: 35px 0 0 15px;
  border-width: 0 1px 1px;
  border-color: white;
  border-style: solid;
  border-radius: 0 0 10px 10px;
  width: 300px;
  height: 100px;
  background-color: rgba(255,255,255,0.5);
}

/* ラッパーの擬似要素で左上と右上のコーナーを作る */
.skeletonBalloonWrap::before,
.skeletonBalloonWrap::after{
  content: "";
  position: absolute;
  bottom: 100%;
  display: block;
  border-color: white;
  border-style: solid;
  width: 10px;
  height: 10px;
  background-color: rgba(255,255,255,0.5);
}

.skeletonBalloonWrap::before{
  left: -1px;
  border-width: 1px 0 0 1px;
  border-radius: 10px 0 0 0;
}

.skeletonBalloonWrap::after{
  right: -1px;
  border-width: 1px 1px 0 0;
  border-radius: 0 10px 0 0;
}

.skeletonBalloon {
  margin: -10px auto 0;
  text-align: left;
}
/* インナーの擬似要素で隙間を作る */
.skeletonBalloon::before,
.skeletonBalloon::after{
  content: "";
  position: absolute;
  display: block;
  left: 10px;
  width: 280px;
}
/* 隙間の背景 */
.skeletonBalloon::before{
  top: -10px;
  height: 10px;
  background-color: rgba(255,255,255,0.5);
}
/* 高さ1pxでベタ→空白→ベタのグラデを作って枠の途切れをカバー */
.skeletonBalloon::after{
  top: -11px;
  height: 1px;
  background-image: linear-gradient(to right, white 28px, transparent 28px, transparent 39px, white 39px);
}

/* カラス口は変形とかで頑張る */
.skeletonBeak{
  position: absolute;
  top: -17px;
  left: 37px;
  border-width: 2px 0 0 2px;
  border-color: white;
  border-style: solid;
  width: 10px;
  height: 10px;
  background-image: linear-gradient(to right bottom, rgba(255,255,255,0.5) 50%, transparent 50%);
  transform:  translate3d(0,0,0) scaleX(.8) rotate(45deg);
}



body{
    background-color: #ffffff;
    background-size: 10px 10px;
    background-position: 0 0, 15px 15px;
    background-image:
        linear-gradient(  45deg, tomato 25%, tomato 25%, orange 25%, orange 75%, tomato 75%, tomato 75%),
        linear-gradient(-135deg, tomato 25%, tomato 25%, orange 25%, orange 75%, tomato 75%, tomato 75%);
}