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

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

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

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

CSS

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

Q&A

解決済

5回答

1711閲覧

特殊な形状に切り抜かれたストライプ背景の実装方法

aKusano

総合スコア3763

CSS3

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

CSS

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

0グッド

1クリップ

投稿2019/05/17 14:17

編集2019/05/17 14:47

##やりたいこと
イメージ説明

↑こちらの画像のような一部が丸く飛び出した形になっている領域の背景をストライプで塗りつぶしたいのですが、
どのようにしたら切れ目なくストライプで塗りつぶせるか思いつきません。

##条件
・ストライプ領域の上の部分は写真だったり、白背景だったりいろいろ。
・ストライプの領域の中は普通にテキストも含めたコンテンツが入るので幅・高さともに可変。
・丸く飛び出した領域の円形のサイズは固定。
・レスポンシブ

##試したこと

四角いブロックの上に丸いブロックを重ねて、
それぞれの背景を-repeating-linear-gradient()でストライプに塗る

##問題になっていること
四角い領域と丸い領域が別オブジェクトになっていると、どうしてもストライプがズレてしまう。
ストライプで塗りつぶされた領域がひとつの一体化した領域にできれば良いのでしょうが、
幅・高さが可変である状態でボックスの一部を丸く飛び出させる方法が思いつかない。

##現状のコード(※簡易版)
実際にはもっと複雑なデザイン&コードなのですが、現在の実装方法と基本的に同じ考え方で
シンプルに再現した状態のコードを掲載しておきます。

HTML

1<div class="block01"></div> 2<div class="block02"> 3 <div class="circle"></div> 4</div>

CSS

1* {margin: 0; padding: 0;} 2.block01 { 3 height: 200px; 4 background: #f00; 5} 6.block02 { 7 height: 200px; 8 background: repeating-linear-gradient(to right, #d7f1fd 0, #d7f1fd 15px, #ebf8fe 15px, #ebf8fe 30px) center center; 9} 10.circle { 11 position: relative; 12 top: -40px; 13 width: 100px; 14 height: 100px; 15 margin: 0 auto; 16 border-radius: 50%; 17 background: repeating-linear-gradient(to right, #d7f1fd 0, #d7f1fd 15px, #ebf8fe 15px, #ebf8fe 30px) center center; 18} 19

何か良い方法はないでしょうか……?

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

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

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

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

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

yasutomi

2019/05/17 14:27

肝心のあなたの試したコードが記載されていないです。
aKusano

2019/05/17 14:49

簡易版のコードを掲載させていただきました。 この方法だとブラウザ幅を変更する度に円の部分と四角の部分で ストライプがズレてしまうので、多分根本的に何か違う手法を考えないといけないのではないかな、と思っております。。。
guest

回答5

0

circle クラスを付与している要素の background-attachment プロパティ に対して fixed を設定することで、縞模様の切れ目がずれてしまう問題を解決することが出来ます。

上記の変更に加えて CSS を調整すると、質問者さんの実現したいことは以下のように行なえると思います(動作確認用リンク)。

HTML

1<div class="block01"></div> 2<div class="block02"> 3 <div class="circle"></div> 4 <p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を</p> 5 6</div>

CSS

1* { 2 margin: 0; 3 padding: 0; 4} 5 6.block01 { 7 height: 200px; 8 background: #f00; 9} 10 11.block02 { 12 min-height: 200px; /* 変更 */ 13 background: repeating-linear-gradient( 14 to right, 15 #d7f1fd 0, 16 #d7f1fd 15px, 17 #ebf8fe 15px, 18 #ebf8fe 30px 19 ) 20 center center; 21} 22 23.circle { 24 position: relative; 25 top: -40px; 26 width: 100px; 27 height: 100px; 28 margin: 0 auto -100px; /* 変更 */ 29 border-radius: 50%; 30 background: repeating-linear-gradient( 31 to right, 32 #d7f1fd 0, 33 #d7f1fd 15px, 34 #ebf8fe 15px, 35 #ebf8fe 30px 36 ) 37 center center fixed; /* 変更 */ 38} 39 40.block02 > * { /* 追記 */ 41 position: relative; 42}

投稿2019/05/17 19:28

編集2019/05/17 19:35
s8_chu

総合スコア14731

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

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

aKusano

2019/05/18 02:18 編集

ご回答ありがとうございました! こんなシンプルな方法があったのですね!!!目からウロコです。 が!残念ながらこの方法ではAndroid実機でズレたままになってしまいました。。 IEでもうまくいったのに……orz コードもシンプルですし、ほんとうはベストアンサーにさせていただきたかったのですが Androidだけダメということと、yhgさんの方が先にご回答いただいていたということから 残念ながら次点とさせていただきました。すみません。 (気持ち的にはベストアンサーでも良いのですが一人にしかつけられないので…)
s8_chu

2019/05/18 09:38 編集

解決されたようで良かったです。 質問者さんが BA に選択したコードでは、スクロールバーの幅によって縞模様がずれてしまう場合がある ( https://codepen.io/anon/pen/gJRdwN ) ので、適宜 `scrollbar-width` プロパティを適用するか、 JavaScript でスクロールバーの幅分ずらす処理を行うなどの対応が必要だと思います。
aKusano

2019/05/21 00:41

おや!そうなんですか。。ちょっと調べてみますね!いろいろありがとうございます!!
guest

0

力技。(左右にはみ出る物はうまく指定するか外側の要素で隠してください)

HTML

1<div class="block01"></div> 2<div class="block02"> 3 <div class="circle"></div> 4 <div class="block03">a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s a s </div> 5</div>

CSS

1.block02 { 2 height: 200px; 3} 4 5.block03 { 6 position: relative; 7 top: -40px; 8} 9 10.circle { 11 position: relative; 12 width: 100px; 13 height: 100px; 14 margin: -40px auto 0; 15 border-radius: 50%; 16 background: repeating-linear-gradient(to right, #d7f1fd 0, #d7f1fd 15px, #ebf8fe 15px, #ebf8fe 30px) center center; 17 background-image: linear-gradient(to right, #d7f1fd 0, #d7f1fd 15px, #ebf8fe 15px, #ebf8fe 30px); 18 background-size: 30px; 19 background-position-x: left; 20} 21 22.circle::before, 23.circle::after { 24 position: absolute; 25 content: ''; 26 display: block; 27 width: 52vw; 28 height: 200vh; 29 top: 40px; 30 background-size: 30px; 31 z-index: 0; 32} 33 34.circle::before { 35 left: 30px; 36 background-image: linear-gradient(to right, #d7f1fd 0, #d7f1fd 15px, #ebf8fe 15px, #ebf8fe 30px); 37 background-position-x: left; 38} 39 40.circle::after { 41 right: 25px; 42 background-image: linear-gradient(to left, #d7f1fd 0, #d7f1fd 15px, #ebf8fe 15px, #ebf8fe 30px); 43 background-position-x: right; 44} 45```**動くサンプル:**[https://jsfiddle.net/jzcw05ab/](https://jsfiddle.net/jzcw05ab/)

投稿2019/05/17 15:52

kei344

総合スコア69366

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

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

yasutomi

2019/05/17 16:10

なるほどグラデーションを左右に付けるのですか。 これは思いつかなかったです。 (個人的にはこちらがベストアンサー)
yasutomi

2019/05/17 21:48

s8_chuさんがbackground-attachment: fixed; を使用される方法を 考案されていたので、現在ではあちらが個人的にはベストアンサー。
aKusano

2019/05/18 02:09

ご回答ありがとうございました。 なるほどー、こういう考え方もあるんですね。。。 サンプルの提示ではかなり省略してシンプルなコードにしましたが、 実際の案件ではもうちょっと複雑でして、 このやり方だとちょっと複雑になりすぎて大変そうだったので今回は見送らせていただきますが、 今後の参考にさせていただきます!
guest

0

ベストアンサー

kei344様の案を見て思いついたのですが、
円部分にoverflow: hidden使いつつ、円の小要素を横座標0横幅100vwで配置し背景設定してみたら割とシンプルに実装できました。

html

1<div class="block01"></div> 2<div class="block02"> 3 <div class="circle"></div> 4</div>

css

1* {margin: 0; padding: 0;} 2.block01 { 3 height: 200px; 4 background: #f00; 5} 6.block02 { 7 position: relative; 8 height: 200px; 9 background: repeating-linear-gradient(to right, #d7f1fd 0, #d7f1fd 15px, #ebf8fe 15px, #ebf8fe 30px) center center; 10} 11.circle { 12 width: 100px; 13 height: 100px; 14 margin: 0 auto; 15 border-radius: 50%; 16 transform: translateY(-40px); // transform すると position: relative を強制される 17 overflow: hidden; 18} 19.circle::before { 20 position: absolute; 21 top: 0; 22 left: calc(50px - 50vw); // 円の半径 - 50vw 23 content: ''; 24 display: block; 25 width: 100vw; 26 height: 100%; 27 background: repeating-linear-gradient(to right, #d7f1fd 0, #d7f1fd 15px, #ebf8fe 15px, #ebf8fe 30px) center center; 28}

投稿2019/05/17 16:42

yhg

総合スコア2161

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

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

aKusano

2019/05/18 02:17

ご回答ありがとうございました! 今回はこちらのコードをベースに少し改変して採用させていただくことにしました! 改変したところは以下の2点です。 (1) .circleにposition:relativeを明記する コメントに、transformすると自動的にrelativeが適用されるとありましたが、 Safariだと自動適用されないようでしたので手動でつける必要がありました。 (2) repeating-linear-gradient()にbackground-attachment: fixedを追記 上記コードだとIEでズレてしまったのでs8_chuさんのfixedをつける方法を追加しました。 s8_chuさんの方法とyhgさんの方法をミックスさせるとすべての環境で思い通りの表示になる 状態でしたので、どちらにベストアンサーをつけるべきか悩んだのですが、 今回は先にご回答いただいたyhgさんをベストアンサーとさせていただきました。 ありがとうございました。
guest

0

興味あったので挑戦してみたところChromeではclip-pathで出来ました。

クロスブラウザ対応したい場合は Canvas 使うしかなさそうですね。

html

1<section class="section"> 2 <div style="height:600px"> 3 hoge 4 </div> 5</section>

scss

1$circle-size: 128px; 2$circle-offset-y: 16px; 3$circle-height: ($circle-size / 2 - $circle-offset-y); 4 5.section { 6 position: relative; 7 z-index: 0; 8} 9 10.section::before { 11 content: ''; 12 display: block; 13 height: $circle-height; 14 width: 100%; 15 clip-path: circle($circle-size at 50% $circle-size); 16} 17 18.section::after { 19 content: ''; 20 display: block; 21 position: absolute; 22 top: $circle-height; 23 left: 0; 24 width: 100%; 25 height: calc(100% - #{$circle-height}); 26} 27 28.section::before, 29.section::after { 30 z-index: -1; 31 background-color: rgb(226, 247, 255); 32 background-image: repeating-linear-gradient(90deg, transparent, transparent 15px, rgb(207, 242, 255) 15px, rgb(207, 242, 255) 30px); 33}

投稿2019/05/17 15:47

編集2019/05/17 16:16
yhg

総合スコア2161

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

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

aKusano

2019/05/18 02:07

ご回答ありがとうございます! 今回はCSSだけでなんとかなりそうなのでCSSで対応することにいたしましたが、 clip-pathで対応せざるを得ない場合の参考にさせていただきます!!
guest

0

コードを見た限りでは全モダンブラウザで
そのような表示にする方法はおそらくないですね。

JavaScriptで.circleの位置を自動調整する方法は
CSSで位置情報を調整するという要望にお応えできませんし、少しずれます。

CSSのmaskプロパティやclip-pathを使用すれば可能ですが
未対応のブラウザがあるため現実的ではないです。
https://tech-dig.jp/css-mask/
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

投稿2019/05/17 14:58

yasutomi

総合スコア2937

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

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

aKusano

2019/05/17 15:16

うーん、やっぱり今のやり方だと無理ですよねー。 clip-pathを使う方法もちょっと考えたのですが、 幅100%で円形の部分だけ固定でセンター配置にするようにclipするとか それはそれで無理っぽいように思えるのですが可能なんでしょうか…?
aKusano

2019/05/18 02:05

サンプルのご提示ありがとうございます!! 今回はCSSだけでもなんとかなりそうなのでCSSで対応しますが、 もう少し複雑な形状でクリップしなければならなくなったときの参考にさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問