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

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

ただいまの
回答率

90.47%

  • HTML

    9288questions

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

  • CSS

    6015questions

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

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 838

brebre

score 21

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

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

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

<div>タイトル</div>

実現したい形

追記
試したこと

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

  width: 100%;
  margin: 0 auto;
  padding: 10px;
  background: url(img/top.png), url(img/bottom.png), url(img/right.png), url(img/left.png);
  background-position: top center, bottom center, center right, center left;
  background-size: 100% 10px, 100% 10px, 4px 100%, 4px 100%;
  background-repeat: no-repeat;
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/10/03 16:31

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

    キャンセル

回答 4

+4

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

div {
  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;
  border-style: solid;
  border-width: 20px;
}

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/07 18:32

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

    キャンセル

checkベストアンサー

+3

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

div {
    margin: 2em;
    padding: 4em;
    background-color: white;
    background-image:
          radial-gradient(circle at left top, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
        , radial-gradient(circle at right top, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
        , radial-gradient(circle at right bottom, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
        , radial-gradient(circle at left bottom, white 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
        , linear-gradient(to top, red 1em, rgba(255,0,0,0) 1em )
        , linear-gradient(to right, red 1em, rgba(255,0,0,0) 1em )
        , linear-gradient(to bottom, red 1em, rgba(255,0,0,0) 1em )
        , linear-gradient(to left, red 1em, rgba(255,0,0,0) 1em );
}

動くサンプル:https://jsfiddle.net/pzm6qw70/


【CSS グラデーションの利用 - ウェブデベロッパーガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients

【radial-gradient - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/radial-gradient


追記:

改良。

div {
    margin: 2em;
    padding: 4em;
    background-position: center;
    background-repeat: no-repeat;
    background-image:
          radial-gradient(circle at left top, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
        , radial-gradient(circle at right top, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
        , radial-gradient(circle at right bottom, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
        , radial-gradient(circle at left bottom, rgba(255,0,0,0) 1em, red 1em, red 2em, rgba(255,0,0,0) 2em)
        , linear-gradient(to bottom, red 1em, rgba(255,0,0,0) 1em )
        , linear-gradient(to left, red 1em, rgba(255,0,0,0) 1em )
        , linear-gradient(to top, red 1em, rgba(255,0,0,0) 1em )
        , linear-gradient(to right, red 1em, rgba(255,0,0,0) 1em )
        ;
    background-size:
          auto auto
        , auto auto
        , auto auto
        , auto auto
        , calc(100% - 2em) auto
        , auto calc(100% - 2em)
        , calc(100% - 2em) auto
        , auto calc(100% - 2em)
        ;
}

動くサンプル:https://jsfiddle.net/pzm6qw70/1/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/07 18:34

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

    キャンセル

+3

・htmlは変更しない

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

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

<div id="wrapper">
  <div id="container">タイトル</div>
</div>
#wrapper,
#container {
  position: relative;
  box-sizing: border-box;
}

#wrapper {
  overflow: hidden;
}

#container {
  border: 3px solid #ff6347;
  padding: 20px;
}

#wrapper::before,
#wrapper::after,
#container::before,
#container::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid #ff6347;
  border-radius: 100%;
  background: #fff;
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
}

#wrapper::before {
  top: -12px;
  left: -12px;
}

#wrapper::after {
  top: -12px;
  right: -12px;
}

#container::before {
  bottom: -15px;
  left: -15px;
}

#container::after {
  bottom: -15px;
  right: -15px;
}

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/07 18:33

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

    キャンセル

-1

文句言われたんで削除

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/03 17:16

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

    キャンセル

  • 2017/10/03 17:16

    じゃ無理

    キャンセル

関連した質問

  • 解決済

    スマホで背面画像を固定したい

    パソコンではattachmentなどが適用されますが、スマホはまだ対応できないみたいですね。何か良い方法はないでしょうか?

  • 受付中

    開いた時のウインドウサイズいっぱいに画像を表示したい

    タイトル通りなんですが、開いた時のウインドウサイズいっぱいに画像を表示したいです。 横は100%ですが、縦はウインドウサイズの100%で少しスクロールしたら、次のコンテンツが見れる

  • 解決済

    ブラウザ毎のCSSの切り替え片(IEとChrome等)

    画像を歪ませず丸く表示するCSSを書いています。 google chromeでは問題無く綺麗に表示されるのですが、Internet Exploreでは歪んでしまいます。同じCSSフ

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 解決済

    box内のリストに画像をずらしながら配置したいです。

    初めて質問させていただきます。 現在某スクールにて演習課題を進めているのですが、boxタグ内の箇条書きリストに画像を位置をずらしながら配置していきたいのですが、うまくいかず苦戦

  • 解決済

    【CSS3】実装方法を教えてください!

    上図のように、青い多角形バーの左右部分のみブラウザウィンドウ幅に合わせて拡大する仕様にしたいのですが、CSS3、もしくはその他の方法でも構いませんがどなたか実装方法を教えてい

  • 解決済

    アイコンが縦方向に中央にならない

    リンクのためのボタンを作っているのですが、どうしてもアイコンがベースラインに並びません まず文字なのですが、::beforeを指定しないと左上端に追いやられてしまいます ::b

  • 解決済

    背景画像の高さを画面のサイズにした時のテキストの中央表示

    背景画像の高さ=画面のサイズに合わせて背景画像を設定しています。 背景画像の上にテキストを入れたいのですが、画面の高さが変わっても中央に表示するにはどのようにすれば良いのでしょうか

同じタグがついた質問を見る

  • HTML

    9288questions

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

  • CSS

    6015questions

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