質問編集履歴

SCSSを記載していましたがコンパイル後のCSSを記載してます。

2021/02/04 11:56

投稿

TMTN

スコア53

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -128,7 +128,7 @@
 ```
-```SCSS
+```CSS
 /* <====== 全体共通 ======> */
@@ -214,22 +214,10 @@
-/* <====== 変数 ======> */
-$main-bg-color: rgba(102, 89, 89, 0.281);
-$main-color-w: rgb(255, 255, 255);
-$main-color-b: rgb(0, 0, 0);
 /* <====== works ======> */
 h2#works {
   padding-top: 12rem;
@@ -246,73 +234,97 @@
   height: 45rem;
-  flex-direction: column;
-  .works-inner-items {
-    width: 90%;
-    height: 40rem;
-    margin-top: 8rem;
-    position: relative;
-    z-index: -1;
-    flex-direction: column;
-    &::after {
-      width: 100%;
-      height: 40rem;
-      content: "";
-      position: absolute;
-      left: 0rem;
-      top: 1rem;
-      transform: skewY(-5deg);
-      transform-origin: bottom left;
-      z-index: -1;
-      background: $main-color-b;
-    }
-    .work-font {
-      font-size: 1.5rem;
-      color: $main-color-w;
-      position: relative!important;
-      .work-arrow {
-        color: $main-color-w;
-        padding: 1rem;
-      }
-    }
-  }
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.works-inner .works-inner-items {
+  width: 90%;
+  height: 40rem;
+  margin-top: 8rem;
+  position: relative;
+  z-index: -1;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.works-inner .works-inner-items::after {
+  width: 100%;
+  height: 40rem;
+  content: "";
+  position: absolute;
+  left: 0rem;
+  top: 1rem;
+  -webkit-transform: skewY(-5deg);
+          transform: skewY(-5deg);
+  -webkit-transform-origin: bottom left;
+          transform-origin: bottom left;
+  z-index: -1;
+  background: black;
+}
+.works-inner .works-inner-items .work-font {
+  font-size: 1.5rem;
+  color: white;
+}
+.works-inner .works-inner-items .work-font a {
+  position: relative;
+  z-index: 10000;
+}
+.works-inner .works-inner-items .work-font .work-arrow {
+  color: white;
+  padding: 1rem;
 }