↑こちらの画像のような一部が丸く飛び出した形になっている領域の背景をストライプで塗りつぶしたいのですが、
どのようにしたら切れ目なくストライプで塗りつぶせるか思いつきません。
##条件
・ストライプ領域の上の部分は写真だったり、白背景だったりいろいろ。
・ストライプの領域の中は普通にテキストも含めたコンテンツが入るので幅・高さともに可変。
・丸く飛び出した領域の円形のサイズは固定。
・レスポンシブ
##試したこと
四角いブロックの上に丸いブロックを重ねて、
それぞれの背景を-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ページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/17 14:49
回答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総合スコア14731
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/17 21:53
2019/05/18 02:18 編集
2019/05/18 09:38 編集
2019/05/21 00:41
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
総合スコア69366
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/17 16:10
2019/05/17 21:48
2019/05/18 02:09
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
総合スコア2161
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/17 21:39
2019/05/18 02:17
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総合スコア2161
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
総合スコア2937
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/17 15:16
2019/05/17 16:02
2019/05/18 02:05
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。