CSSでbackgroundの変形をさせたい

HTML
1<section id="works">
2  <div class="works-slide">
3
4
5  </div>
6<div>
7    <p>more</p>
8  </div>
9</section>

CSS
1#works {
2  position: relative;
3  overflow: hidden;
4  margin: 10% 0;
5  padding: 80px 0;
6}
7#works :before {
8  content: '';
9  position: absolute;
10  top: 0;
11  left: 0;
12  width: 120%;
13  height: 80%;
14  margin: 3% -10% 0;
15  background: #f5f5f5;
16  -webkit-transform-origin: left center;
17  -ms-transform-origin: left center;
18  transform-origin: left center;
19  -webkit-transform: rotate(3deg);
20  -ms-transform: rotate(3deg);
21  transform: rotate(3deg);
22  z-index: -1;
23}
24#works :after {
25  content: '';
26  position: absolute;
27  top: 0;
28  left: 0;
29  width: 120%;
30  height: 80%;
31  margin: 3% -10% 0;
32  background: #f5f5f5;
33  -webkit-transform-origin: right center;
34  -ms-transform-origin: right center;
35  transform-origin: right center;
36  -webkit-transform: rotate(-3deg);
37  -ms-transform: rotate(-3deg);
38  transform: rotate(-3deg);
39  z-index: -2;
40}
41
42.works-slide {
43  box-sizing: border-box;
44  width: 100%;
45  max-width: 1170px;
46  height: 100%;
47  margin: 0 auto;
48  padding: 100px 10px 120px;
49  color: #333;
50  text-align: center;
51}

上の画像のように背景の色の形を変形させたいのですが、
上記のようにコードを打っても変形させることができませんでした。
画像のような背景にするにはどうしたらよろしいでしょうか。

ご教示いただけましたらと思います。
よろしくお願いします。

kei344

2018/01/11 03:45

SCSSではなく出力されたCSSを提示されたほうが回答を得やすいと思います。

KyutoYosihama

2018/01/11 03:57

指摘ありがとうございます。修正いたしました。

行動規範の内容に同意します

回答3件

ベストアンサー

borderを使い、灰色の背景を白の三角形で切り取るというのもシンプルで良いと思います。
border-widthには%値が使えないので、vw値（ブラウザの幅に対する%）でレスポンシブにします。

css
1#works {
2  position: relative;
3  overflow: hidden;
4  margin: 10% 0;
5  padding: 80px 0;
6  background: #f5f5f5;
7}
8#works:before {
9  content: '';
10  position: absolute;
11  top: 0;
12  left: 50%;
13  width: 0;
14  height: 0;
15  margin-left: -50vw;
16  border-style: solid;
17  border-color: #fff transparent transparent;
18  border-width: 3vw  50vw 0;
19}
20#works:after {
21  content: '';
22  position: absolute;
23  bottom: 0;
24  left: 50%;
25  width: 0;
26  height: 0;
27  margin-left: -50vw;
28  border-style: solid;
29  border-color: transparent #fff;
30  border-width: 3vw  50vw 0;
31}

投稿2018/01/12 07:29

CODEISLE

総合スコア251

KyutoYosihama

2018/01/12 08:49

borderの設定の仕方を真似したら、うまくできました。ありがとうございます。

行動規範の内容に同意します

擬似要素を回転させて表現しているので、提示の画像のようにするには白⇒灰と灰⇒白の2つで実装するのが良いと思います。

また、#works :before ではなく #works:before としないと、#works *:before と解釈されて #works 配下の全ての要素に適用されてしまいます。

投稿2018/01/11 05:36

kei344

総合スコア69400

KyutoYosihama

2018/01/11 10:07

回答ありがとうございます。 CSSの記述に関しては修正できました。ただ、背景の設定部分で、「白⇒灰と灰⇒白の2つで実装する」という部分がよくわかっていません。私の理解不足で申し訳ないのですが、どのようにすればよいかご教示いただけますでしょうか。よろしくお願いします。

kei344

2018/01/11 12:50

「白⇒灰」は「白の背景と灰色の背景が切り替わる部分」という意味です。 <div class="白⇒灰"><div> <div class="灰背景"><div> <div class="灰⇒白"><div>

KyutoYosihama

2018/01/12 03:52

現状ではsectionタグに擬似要素を使用しているのですが、上記の場合だとsectionタグを使用せず、 <div class="灰背景"><div> の中にスライダーやボタンの設置を行うといったイメージでしょうか？

kei344

2018/01/12 03:55

タグはあくまで例示しただけですので、構造にあわせて選択してください。＞の中にスライダーやボタンの設置を行うといったイメージでしょうか？はい。

KyutoYosihama

2018/01/12 07:05

構造の意味が理解できたので、やってみたところできました。ありがとうございます。ただ、レスポンシブとして考えた時に、擬似要素を使用している部分で、border-widthが％指定できないことから、レスポンシブにならないのですが、どうしたらよいでしょうか。コードは回答の部分に載せてあります。ご教示、よろしくお願いします。

kei344

2018/01/12 07:40

私はborderを使う提案はしていませんよ。もともとのCSSでされている方法でやれば問題ないと思いますが･･･。

KyutoYosihama

2018/01/12 08:50

なんとか解決にもっていけました。ご教示、ありがとうございました。

行動規範の内容に同意します

HTML
1<section id="works">
2  <div class="background-1"></div>
3  
4  <div class="background-2">
5    <h2> <small>WORKS</small></h2>
6    <p>制作実績</p>
7    <div class="works-slide">
8      
9    </div>
10    <div>
11      <p>more</p>
12    </div>
13  </div>
14  
15  <div class="background-3"></div>
16
17</section>

CSS
1#works {
2  position: relative;
3  overflow: hidden;
4  margin: 10% 0;
5  padding: 80px 0;
6  display: flex;
7  flex-direction: column;
8}
9#works .background-1 {
10  background: #f5f5f5;
11  width: 100%;
12  height: 100px;
13  padding-top: 15px;
14  position: relative;
15}
16#works .background-1:before {
17  content: "";
18  position: absolute;
19  width: 100%;
20  height: 0;
21  left: 0;
22  top: 0;
23  border-left: 570px solid transparent;
24  border-right: 570px solid transparent;
25  border-top: 80px solid #ffffff;
26}
27#works .background-2 {
28  background: #f5f5f5;
29}
30#works .background-3 {
31  background: #ffffff;
32  width: 100%;
33  height: 100px;
34  padding-top: 15px;
35  position: relative;
36}
37#works .background-3:before {
38  content: "";
39  position: absolute;
40  width: 100%;
41  height: 0;
42  left: 0;
43  top: 0;
44  border-left: 570px solid transparent;
45  border-right: 570px solid transparent;
46  border-top: 80px solid #f5f5f5;
47}