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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

3回答

2206閲覧

flexboxの上に六角形のオブジェクトを配置したい

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2018/03/26 02:25

編集2022/01/12 10:55

下記レイアウトをflexboxで作成しております。
六角形のオブジェクトをflexboxの上に配置するにはどのようにしたらよろしいでしょうか?
ご教示頂くと頂きますと幸いです。

イメージ説明

index.html

1<div class="flexbox"> 2 <div class="item"> 3 <img src="http://placehold.it/240x150" alt="" /> 4 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> 5 </div> 6 <div class="item"> 7 <img src="http://placehold.it/240x150" alt="" /> 8 <p>Nulla pharetra porta sagittis. Mauris et suscipit diam...</p> 9 </div> 10 <div class="item"> 11 <img src="http://placehold.it/240x150" alt="" /> 12 <p>Integer ornare felis eu risus ultrices pharetra eu non velit...</p> 13 </div> 14</div>

style.css

1.item { 2 border-radius: 10px; 3 background: #edf; 4 padding: 15px; 5 margin: 5px; 6 text-align: center; 7} 8img { 9 max-width: 100%; 10 height: auto; 11} 12p { 13 text-align: left; 14} 15 16/* Responsive */ 17@media ( min-width : 600px ){ 18 .flexbox { 19 display: -webkit-flex; 20 display: flex; 21 -webkit-flex-wrap: wrap; 22 flex-wrap: wrap; 23 } 24 .item { 25 width: 25%; 26 } 27}

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

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

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

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

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

yoshinavi

2018/03/26 03:09

六角形のオブジェクトの描画方法の質問ですか?それともオブジェクトの配置方法の質問なのでしょうか?
退会済みユーザー

退会済みユーザー

2018/03/26 03:10

オブジェクトの配置方法です。言葉足らずで申し訳ございません。
guest

回答3

0

ゴリ押css

仕組みは
・background4つを定義しグラデーションを各々傾け、滲みを0で表現
・それぞれの場所に配置

参考URL:http://webrocketsmagazine.com/entry/20120203/css3-bevel.html

html

1<!doctype html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7#container{ 8 display:flex; 9 width:100%; 10 flex-wrap:wrap; 11 justify-content:space-around; 12} 13 14#container>section{ 15 margin:50px 0; 16 padding: 0; 17 width: 50%; 18 height:200px; 19 text-align: center; 20 border:10px solid #77f; 21 box-sizing: border-box; 22 position: relative; 23} 24 25#container>section::before{ 26 content:attr(data-text); 27 position: absolute; 28 line-height: 120px; 29 top:-60px; 30 left:50%; 31 margin-left: -40px; 32 width: 80px; 33 height: 120px; 34 background: 35 -webkit-linear-gradient(60deg, transparent 50%, #00ccff 0), 36 -webkit-linear-gradient(120deg, transparent 50%, #00ccff 0), 37 -webkit-linear-gradient(240deg, transparent 50%, #00ccff 0), 38 -webkit-linear-gradient(300deg, transparent 50%, #00ccff 0); 39 background-position: bottom left, bottom right, top right, top left; 40 background-size: 50% 50%; 41 background-repeat: no-repeat; 42} 43 </style> 44</head> 45<body> 46<div id="container"> 47 <section data-text="1"></section> 48 <section data-text="2"></section> 49 <section data-text="3"></section> 50</div> 51</body> 52</html>

投稿2018/03/26 08:40

編集2018/03/26 09:23
sousuke

総合スコア3828

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

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

0

六角形の画像を用意し、<div class="item">を親要素として、用意した六角形の画像を子要素としてposition: absolute;で任意の位置に設定したidやclassを付与してみてはどうでしょうか?
(回答文を一部編集)

投稿2018/03/26 03:17

編集2018/03/26 06:24
yoshinavi

総合スコア3521

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

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

0

マトモにやろうとするとSVGを使うのがいいと思いますが、
HTML5でのSVGファイル操作のおさらい

最初は画像にしちゃった方が楽かもしれませんね。

投稿2018/03/26 02:48

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2018/03/26 02:58

有難うございます。flexbox内には上から画像、テキスト、詳しくはこちらボタンがありまして、SEOの観点からテキスト部分の画像化を避けないです。その場合は、SVGで埋め込みコードとして作成するのがベターでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問