吹き出しのcssについて

解決済 kcndkq
(@kcndkq)

3年、 1ヶ月前

ジャジャーンのサイト
https://jajaaan.co.jp/css/css-headline/
上記のサイトで線のみの吹き出し風見出し2が気に入り使おうと思うのですが、吹き出しの飛び出ている部分を左側にしたいのと、飛び出ている部分を線対称にしたいのですがどこを変えればいいのか分かりません。教えていただけないでしょうか。

ヘルプの必要なページ: [リンクを見るにはログイン]

5件の返信を表示中 - 1 - 5件目 (全5件中)

Aoba Momouchi
(@aoixtreme)

3年、 1ヶ月前
現在のCSSで該当箇所（飛び出ている部分）はこのようになっています。
※関係ないものは省略。
```
h2:before {
  right: 50px;
  border-width: 21px 21px 0 0;
}
h2:after {
  right: 54px;
  border-width: 14px 14px 0 0;
}
```
これをを以下に書き換えて下さい。
```
h2:before {
  left: 1em;
  border-width: 21px 12px 0 12px;
}
h2:after {
  left: 1em;
  border-width:  21px 12px 0 12px;
}
```
Aoba Momouchi
(@aoixtreme)

3年、 1ヶ月前
万が一ですが、元のサイトが参照不能になると内容が意味不明になりますので、変更後の全体を載せておきます。
```
h2 {
  position: relative;
  padding: 1.5rem 2rem;
  border-bottom: 3px solid #000;
  border-left: 3px solid #000;
  border-radius: 0 0 0 20px;
}

h2:before {
  position: absolute;
  left: 1em;
  bottom: -21px;
  width: 0;
  height: 0;
  content: '';
  border-width: 21px 12px 0 12px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

h2:after {
  position: absolute;
  left: 1em;
  bottom: -14px;
  width: 0;
  height: 0;
  content: '';
  border-width:  21px 12px 0 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
```
トピック投稿者 kcndkq
(@kcndkq)

3年、 1ヶ月前

返信いただきありがとうございます。
吹き出しの飛び出している部分が左にいき線対称になりました。
吹き出しの飛び出している部分をもう少し右にずらすにはどこを変えればよいのでしょうか。
また、文章の先頭と末尾の空白を狭めたい場合はどこを変えればよいのでしょうか。
Aoba Momouchi
(@aoixtreme)

3年、 1ヶ月前
吹き出しの飛び出している部分をもう少し右にずらすにはどこを変えればよいのでしょうか。

left: 1em;のところの数字を大きくしてください。

文章の先頭と末尾の空白を狭めたい場合はどこを変えればよいのでしょうか。
```
h2 {
  padding: 1.5rem 2rem;
}
```
だと2単位(2rem)ですが、
```
h2 {
  padding: 1.5rem 1rem;
}
```
にすると1単位分になります。
- この返信は3年、 1ヶ月前にAoba Momouchiが編集しました。
トピック投稿者 kcndkq
(@kcndkq)

3年、 1ヶ月前

納得いく吹き出しにできました。
ありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)

トピック「吹き出しのcssについて」には新たに返信することはできません。