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

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

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

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

CSS

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

Q&A

解決済

4回答

7263閲覧

CSSのみでborderの角を逆方向に丸くしたい。

brebre

総合スコア29

HTML

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

CSS

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

0グッド

4クリップ

投稿2017/10/03 07:12

編集2017/10/03 07:49

タイトルを囲うボーダーの角を逆方向に丸くしたいのですが、
うまくいきません。(下にイメージ画像)
イメージ画像は角が綺麗な円状になっていませんが、円状で構いません。

条件としては、
・タイトルの文字数は未定なので、文字数が増えても形が崩れないこと
・htmlは変更しない
・横幅が変化しても形が崩れないこと
・CSSのみで形をつくる

以上の条件下でイメージ画像のような形をつくることができるのでしょうか。
ぜひご教授いただければ幸いです。

html

1<div>タイトル</div>

実現したい形

追記
試したこと

4つのパーツに分けて画像を切り出し、背景として合わせました。
ブラウザの倍率やブラウザが変わるとずれが生じてしまうことから、CSSだけで実現できないか質問させていただきました。

css

1 width: 100%; 2 margin: 0 auto; 3 padding: 10px; 4 background: url(img/top.png), url(img/bottom.png), url(img/right.png), url(img/left.png); 5 background-position: top center, bottom center, center right, center left; 6 background-size: 100% 10px, 100% 10px, 4px 100%, 4px 100%; 7 background-repeat: no-repeat;

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

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

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

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

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

m.ts10806

2017/10/03 07:31

調べてみたこと、やってみたことはありますか?あれば追記してください。
guest

回答4

0

画像を使ってしまっていますが

CSS

1div { 2 border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAH4SURBVGhD7Zo7S8RAFIXzN/0RFnbW22opWFnYWAl2YrutvZWNhdXCKr5WUDEenOvlZF6k2DvJ4HwcECaP+2Uyk9HErk/zenW+2tuZJCgtEjGa9Pbyj6XzZ9kK48vlpJ9ODvUs79dLaTUDJbQcSktrjJz0erGrZ/m4vZFWM1BCy6G0tMZISn+tV3oKRFqN4YoQkNaApDTfrIeDfWk1BoW0aGZAJqX5+JeLU2k1BoW0aKan4tI8vJDP+zvZYAwKcd3URIpLPx4t9MhiY8PBdxga0jokIr1ZXuphSIGHHcNzCYGMbCB8ae8GFe5mB3c2Eg7OgbTXx0iBx3OIN6MQr787LJjI89kxLyUuBZbuFLyku0APks6287ZpsIecYCIg4Clp4tLR4V+ecLi6+NK4vsz6WR7IhF0+kP7evMm+MwNi7DmQll1mCXs2aUvYs0lbwp5N2hL2bNKWsGeTtoQ9m7Ql7NmkLWHPJm0JezZpS9izSVvCngPpKv8aR+p776Gp7A2TBtcnh05E2MGaOt+ayl6/hLdjpu+n5ecf9X0JcHj9XcE3F0d9X7eAN6rCG2SENzhTMyouDfiK6/hiC3hsFRsh3FOZuZSUxvqpxyPSagxXzPw2kZQGvNwUeGDzREJpaY2Rk67yP2t4LS2wpI8vN1a6cJp0qeSk+/4H37UTFZzRKTsAAAAASUVORK5CYII=') 20; 3 border-style: solid; 4 border-width: 20px; 5}

border-image
https://developer.mozilla.org/ja/docs/Web/CSS/border-image

http://www.htmq.com/css3/border-image.shtml
https://allabout.co.jp/gm/gc/441025/

MDNにIE未サポートと書いてありますが、実際には対応しています(IE11で確認)。
http://caniuse.com/#search=border-image

投稿2017/10/03 08:19

x_x

総合スコア13749

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

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

brebre

2017/10/07 09:32

ご回答いただきありがとうございました。 こちらで回答いただいた内容でも問題なく表示されました。
guest

0

ベストアンサー

制約がなくも無いが、とりあえずできる方法を。

CSS

1div { 2 margin: 2em; 3 padding: 4em; 4 background-color: white; 5 background-image: 6 radial-gradient(circle at left top, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em) 7 , radial-gradient(circle at right top, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em) 8 , radial-gradient(circle at right bottom, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em) 9 , radial-gradient(circle at left bottom, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em) 10 , linear-gradient(to top, red 1em, rgba(255,0,0,0) 1em ) 11 , linear-gradient(to right, red 1em, rgba(255,0,0,0) 1em ) 12 , linear-gradient(to bottom, red 1em, rgba(255,0,0,0) 1em ) 13 , linear-gradient(to left, red 1em, rgba(255,0,0,0) 1em ); 14} 15```**動くサンプル:**[https://jsfiddle.net/pzm6qw70/](https://jsfiddle.net/pzm6qw70/) 16 17--- 18 19 20【CSS グラデーションの利用 - ウェブデベロッパーガイド | MDN】 21[https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients) 22 23【radial-gradient - CSS | MDN】 24[https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient](https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient) 25 26 27--- 28 29**追記:** 30 31改良。 32 33```CSS 34div { 35 margin: 2em; 36 padding: 4em; 37 background-position: center; 38 background-repeat: no-repeat; 39 background-image: 40 radial-gradient(circle at left top, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em) 41 , radial-gradient(circle at right top, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em) 42 , radial-gradient(circle at right bottom, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em) 43 , radial-gradient(circle at left bottom, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em) 44 , linear-gradient(to bottom, red 1em, rgba(255,0,0,0) 1em ) 45 , linear-gradient(to left, red 1em, rgba(255,0,0,0) 1em ) 46 , linear-gradient(to top, red 1em, rgba(255,0,0,0) 1em ) 47 , linear-gradient(to right, red 1em, rgba(255,0,0,0) 1em ) 48 ; 49 background-size: 50 auto auto 51 , auto auto 52 , auto auto 53 , auto auto 54 , calc(100% - 2em) auto 55 , auto calc(100% - 2em) 56 , calc(100% - 2em) auto 57 , auto calc(100% - 2em) 58 ; 59} 60```**動くサンプル:**[https://jsfiddle.net/pzm6qw70/1/](https://jsfiddle.net/pzm6qw70/1/)

投稿2017/10/03 09:43

編集2017/10/03 10:17
kei344

総合スコア69364

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

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

brebre

2017/10/07 09:34

今回、こちらをベストアンサーとさせていただきました。 ご回答いただきありがとうございました。
guest

0

・htmlは変更しない

この条件がある限りかなり難しいのではないでしょうか。

もし該当の要素が下記のように二重構造になっている場合のみ、疑似要素を駆使して実装はできます。かなり無理矢理ですが。

HTML

1<div id="wrapper"> 2 <div id="container">タイトル</div> 3</div>

CSS

1#wrapper, 2#container { 3 position: relative; 4 box-sizing: border-box; 5} 6 7#wrapper { 8 overflow: hidden; 9} 10 11#container { 12 border: 3px solid #ff6347; 13 padding: 20px; 14} 15 16#wrapper::before, 17#wrapper::after, 18#container::before, 19#container::after { 20 content: ""; 21 display: inline-block; 22 width: 30px; 23 height: 30px; 24 border: 3px solid #ff6347; 25 border-radius: 100%; 26 background: #fff; 27 position: absolute; 28 z-index: 1; 29 box-sizing: border-box; 30} 31 32#wrapper::before { 33 top: -12px; 34 left: -12px; 35} 36 37#wrapper::after { 38 top: -12px; 39 right: -12px; 40} 41 42#container::before { 43 bottom: -15px; 44 left: -15px; 45} 46 47#container::after { 48 bottom: -15px; 49 right: -15px; 50}

サンプル
https://jsfiddle.net/z28fg84d/

投稿2017/10/03 08:16

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

brebre

2017/10/07 09:33

ご回答いただきありがとうございました。
guest

0

文句言われたんで削除

投稿2017/10/03 08:05

編集2017/10/03 08:20
arasi

総合スコア156

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

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

masaya_ohashi

2017/10/03 08:16

それタグ増えてるので希望にそえてないのでは…?
arasi

2017/10/03 08:16

じゃ無理
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問