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

Question

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

CSS3でのマスクなどいろいろ検討したのですが私にはお手上げで…
どなたかご教授よろしくお願いいたします。

＜補足説明＞
・背景には画像を配置したいので青い部分以外は透過。
・ブラウザウィンドウ高さを拡大しても青い部分の高さは固定。
・ブラウザウィンドウサイズをデフォルトより縮小した場合に青い部分を縮小する必要は無し。

以上、何卒よろしくお願いいたします。

Comments

[defghi1977]

質問のタイトルは具体的に何がしたいのかが判るものとして下さい.

[Ronny]

申し訳ありません、この場合どのようなタイトルをつけるべきかわからなくて…

[defghi1977]

> 上図のように、青い多角形バーの左右部分のみブラウザウィンドウ幅に合わせて拡大する仕様にしたいのですが、 がこの質問の肝なので, 「画像の左右だけ引き伸ばして表示したい」とかつけとけば良いのですよ

[Ronny]

なるほど。お教えありがとうございます！

Answer 1

背景画像を扱うbackground-xxx系のプロパティは総じて複数の値を設定できます. そのため4つのPNG画像(青いラインを分割したものと, 更にその後ろの背景写真)を用意して, 適切にbackground-position, background-size, background-repeat値を定義すれば対処できます.

body {
  position: absolute;
  background-image: 
        url(http://jsrun.it/assets/g/V/3/B/gV3BD),/*左可変画像*/
        url(http://jsrun.it/assets/C/i/d/9/Cid9h),/*中央固定画像*/
        url(http://jsrun.it/assets/q/U/3/q/qU3qI),/*右可変画像*/
        url(http://jsrun.it/assets/G/z/m/x/GzmxO.png);
  background-size: calc(50% - 100px) 200px,200px 200px,calc(50% - 100px) 200px,200px 200px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-position: left top, center top, right top, left top;
}

動作例
http://jsdo.it/defghi1977/ezjI

---

NOTE:以下はSVGを用いた別解です.

ここではレスポンシブなSVGを使った解決策を提示します.

<!--背景画像とするSVG-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
	<svg x="50%" y="50%" overflow="visible">
		<path d="M-2000,100H-100L100-100H2000" stroke-width="50" stroke="navy" fill="none"/>
	</svg>
</svg>

<div></div>

div{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(responsive.svg), url(bg.jpg);
}

動作例
http://jsdo.it/defghi1977/4ZW5

---

NOTE:
以下はborder-imageで解決できると早合点した際の名残です. 実際には画像の固定位置が中央部となるため, 本プロパティでは対処できません.

CSSのborder-imageプロパティを使えば実現できるでしょう.

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

Comments

[Ronny]

早々にありがとうございます！
検証してみます。

[Ronny]

検証してみましたがうまくいきません…
もしよろしければ追記したのでサンプルをご確認いただけないでしょうか？
よろしくお願いします。

[defghi1977]

ああ, これborder-imageの逆で, 真ん中が固定なのね.
ちょっと考えてみるね.

[Ronny]

ありがとうございます！
実装検証したところ完璧でした！！
ほんと助かりました・・・涙
重ね重ねありがとうございました！！！

Answer 2

こんにちは。

こんな感じですかね

<section>
	<div class="line-box"></div>
</section>

*{
	padding:0;
	margin:0;
}
body{
	width:100%;
}
section{
	width:100%;
	height:500px;
	overflow:hidden;
	position:relative;
	
}

.line-box{
	position:absolute;
	width:100px;
	height:200px;
	background-color:#00ff00;
	top:50%;
	left:50%;
	transform:skew(-30deg) translate(-50%,-50%);
	&::before,&::after{
		content:" ";
		position:absolute;
		display:block;
		top:0;
		
		width:calc((120vw - 100px) / 2);
		height:100px;
		background-color:#00ff00;	
	}
	&::before{
		left:calc((-120vw + 100px) / 2);
		top:100px;
	}
	&::after{
		left:calc(100px);
	}
}

ざっくりですが。

Comments

[Ronny]

ご回答ありがとうございます。
どうも説明不足だったようです。
申し訳ございません。
追記しましたのでご確認していただけると幸いです。