添付画像のような吹き出しの作り方がわからない

Question

前提・実現したいこと

以下のような吹き出しのパーツをhtml ,css を駆使して作成したいのですが、うまくできません。
とくに左右の斜めになっている箇所が特に分からず....clip-pathプロパティを使うことで台形などが作成できるのでやってみた結果、outlineが表示されずうまくいきません。

わかる方ぜひ教えていただければ嬉しいです。

該当のソースコード

<div class="wrapper">
  <div class="wrapper__text">先着10名様限定</div>
</div>

.wrapper {
    
    width: 124px;
    height: 38px;
    outline: 1px solid #8B6C3A;
    clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
    position: relative;

}

.wrapper__text {

    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.05em;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

試したこと

clip-pathプロパティに関してはこちらのサイトを参考にしました。参考リンク

Answer 1

• 平行四辺形にするには、transform: skewX()を使います。
• 吹き出しの三角形部分はborderで2つつくり、ずらして重ねて配置しています。

動作確認用：https://jsfiddle.net/dx53eart/2/

/* リセットCSS */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 2em;
}

/* ここから吹き出しのCSS */
.wrapper {
  width: 124px;
  height: 38px;
  position: relative;
}

.wrapper::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: skewX(-10deg);  /* 斜めに歪ませる */
  border: 1px solid #8B6C3A;
}

.wrapper__text {
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.05em;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper__text::before,
.wrapper__text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  bottom: 1px; /* borderの太さと同じpx */
  border-style: solid;
  border-width: 18px 16px 0 0; /* 吹き出しの三角形部分のの大きさ */ 
}

.wrapper__text::before {
  transform: translate(0, 100%);
  z-index: 1;
  border-color: #ffffff transparent transparent transparent; /* 白色の三角形 */
}

.wrapper__text::after {
  /* 白色三角形の下に、黄土色の三角形を、右下にずらして配置する */
  transform: translate(4%, calc(100% + 4%)); /* 4%の部分は、線の太さ */
  z-index: 0;
  
  border-color: #8B6C3A transparent transparent transparent; /* 黄土色三角形 */
}

Comments

[AN3000]

ありがとうございます！！要素を斜めにできるプロパティがあったのですね...知りませんでした。
これでなんとか進められそうです。ありがとうございました！