cssでの背景画像ボカシと斜め区切りの併用

Question

sectionの背景画像の上下を斜めにするために、::beforeと::afterで実装させているのですが、それに加えて、背景画像にボカシを入れる事は可能でしょうか？ボカシも疑似要素でやるために、前述の::after、::beforeで疑似要素を使い切ってるために、無理でしょうか？

現状、ボカシ加工をした背景画像を設置して、問題はないといえばないのですが。

どうしても気になったもので。

よろしくお願いいたします。

コードは、下記のように記載してあります。

<section>○○○</section>

section {
position: relative;
}

section::before {
content: '';
clip-path: polygon(0 0, 100% 0%, 100% 0%, 0 100%);
background: #FFF;
width: 100%;
height: 100px;
position: absolute;
top: -1px;
left: 0;
}

section.middle::after {
content: '';
clip-path: polygon(0 0, 100% 99%, 100% 100%, 0 100%);
background: #FFF;
width: 100%;
height: 100px;
position: absolute;
top: auto;
bottom: -1px;
left: 0;
z-index: 1000;
}

Comments

[退会済みユーザー]

> ボカシ加工をした背景画像
opacityプロパティを使ってはいけないのですな？
https://developer.mozilla.org/ja/docs/Web/CSS/opacity

[hatena19]

sectionの背景画像の上下を斜めにしているHTMLとCSSを質問に追記してください。
あと、背景画像ボカシは filter: blur() のことですか。

[niccha]

下記のように記載してあります。

html

<section>○○○</section>

css

section {
position: relative;
}
section::before {
content: '';
clip-path: polygon(0 0, 100% 0%, 100% 0%, 0 100%);
background: #FFF;
width: 100%;
height: 100px;
position: absolute;
top: -1px;
left: 0;
}

section.middle::after {
content: '';
clip-path: polygon(0 0, 100% 99%, 100% 100%, 0 100%);
background: #FFF;
width: 100%;
height: 100px;
position: absolute;
top: auto;
bottom: -1px;
left: 0;
z-index: 1000;
}

[hatena19]

質問は編集できますのでそのコードは質問に追記してください。ここだと初期値は閉じてますので回答者の目に入らない可能性がたかいです。
コードはマークダウンのコードブロックに入れてください。

Answer 1

スマホからなので簡単に。

https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

clip-pathで自由に切り出してとblurの2つで解決できると思います。

Answer 2

HTMLやCSSの提示がないので、
よく分からんけど、下記のような感じでしょうか。

codepenサンプル

上下の斜め区切りは疑似要素の上下境界線を transform で斜めに変形させることで、一つの疑似要素で実現しています。

---

コメントより

上下別々の角度にしたいもので、after、beforeで実装させてるのです。

セクションを直接 clip-path で切り取ればいいのでは。

.bgImage {
  width: 100%;
  height: 500px;
  background: url(sample.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 100px, 100% 0,  100% 100%, 0 calc(100% - 100px));
}

codepenサンプル

Comments

[niccha]

ご回答、ありがとうございます！

はい、いただいたやつだと上下平行になってますが、上下別々の角度にしたいもので、after、beforeで実装させてるのです。

何かいい方法ありませんでしょうか？

[niccha]

ありがとうございます！
うまくいきました。
こういう方法もあるのですね。