質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2318閲覧

CSS吹き出しで「長方形と三角の内側を透過し、角丸の枠線は透過しない」

dockhack

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/21 02:52

編集2020/05/21 02:53

前提・実現したいこと

https://teratail.com/questions/178011の記事を参考にし、
「長方形と三角の内側を透過し、枠線は透過しない」ことは実現可能だと知りました。
こちらをさらに発展させて、枠線部分を角丸にしたいと考えております。

該当のソースコード

html

1<div class="wrapper"> 2 <div class="say"> 3 <p>三角の部分も透過させたいです。<br>そんな吹き出し、できませんか?</p> 4 </div> 5</div>

css

1.wrapper { 2 padding: 100px 20px; 3 background-image: url(http://urx.space/9W4K); 4} 5.say { 6 position: relative; 7 display: inline-block; 8 margin: 1.5em 0 1.5em 15px; 9 padding: 7px 10px; 10 min-width: 120px; 11 max-width: 100%; 12 color: #555; 13 font-size: 16px; 14 background: transparent; 15 border: solid 3px #fff; 16 box-sizing: border-box; 17 border-left-color: transparent; 18} 19.say:before { 20 content: ""; 21 position: absolute; 22 top: -3px; 23 left: -3px; 24 bottom: -3px; 25 width: 3px; 26 background: linear-gradient(to bottom, #fff calc(50% - 11px), transparent calc(50% - 11px), transparent calc(50% + 11px), #fff calc(50% + 11px)); 27} 28.say:after { 29 content: ""; 30 position: absolute; 31 top: 50%; 32 left: -8px; 33 height: 16px; 34 width: 16px; 35 border-bottom: 3px solid #fff; 36 border-left: 3px solid #fff; 37 transform: rotate(45deg); 38 transform-origin: top right; 39} 40.say p { 41 color: #fff; 42 margin: 0; 43 padding: 0; 44}

試したこと

単純に.sayの中に{border-radius: 10px;}を設定しただけでは左側がずれてしまい
.say:beforeのtopやleftの値をうまく調整してもきれいな角丸を実現できずに困っております。
お力添えをいただけますと幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CSS

1border-radius: 0 0 0 10px;

のようにひとつの頂点のみに適用してみてはいかがでしょうか?

投稿2020/05/23 03:10

tomoki_fab

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dockhack

2020/06/01 13:37

ありがとうございます。 おそらくこちらのやり方ですときれいな角丸を実現させることは不可能という結論に至りました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問