Q&A
ありがとうございます。
無事解決しました。
タイトルの通りです。
skewの後にtranslate3d(0, 0, 0)を記述することで解消すると見たのですが、自分の場合は効果はありませんでした。
skewを使わないやり方も調べてみたのですがいまいち理解が出来ずに困っています。
どなたかよろしくお願いします。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 6 <meta name="description" content="aaaa" /> 7 <title>aaaa</title> 8 <link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet"> 9 <link href="css/reset.css" media="all" rel="stylesheet" type="text/css" /> 10 <link href="css/photoswipe/photoswipe.css" media="all" rel="stylesheet" type="text/css" /> 11 <link href="css/photoswipe/default-skin/default-skin.css" media="all" rel="stylesheet" type="text/css" /> 12 <link href="style.css" media="all" rel="stylesheet" type="text/css" /> 13 <link rel="shortcut icon" href="img/favicon.ico" /> 14 <link rel=”canonical” href=”URLが入る” /> 15</head> 16 17<body> 18 <div class="wrapper"> 19 20 <header class="header"> 21 <div class="overlay"> 22 23 </div> 24 <h1 class="logo"> 25 <div class="logo-title">a</div> 26 <div class="logo-subtitle">a</div> 27 </h1> 28 </header> 29 30 <main class="content"> 31 32 33 <!-- .feature-section --> 34 <section class="feature-section section" id="feature-section"> 35 <div class="inner"> 36 <div class="section-heading"> 37 <h2 class="heading-primary">FEATURE</h2> 38 </div> 39 <div class="section-lead"> 40 <p> 41 aaaaaa 42 </p> 43 </div> 44 <div class="section-body feature"> 45 <div class="feature-item"> 46 <div class="feature-image-wrapper"> 47 <a href="https://www.yahoo.co.jp/" target="_blank" class="hover-action"><img clas="feature-image" 48 src="img/feature/feature.jpg" alt=""></a> 49 </div> 50 <div class="feature-body"> 51 <p> 52 <span class="text-bold">aaa：</span><br>aaa<br><a href="#" target="_blank">https://●●●.com</a></p> 53 <p><span class="text-bold">aaa：</span><br>Design / Coding (Responsive) / WordPress / Writing</p> 54 <p><span 55 class="text-bold">コメント：</span><br>テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 56 </p> 57 <p> 58 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 59 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 60 </div> 61 </div> 62 </div> 63 </div> 64 </section>
css
1*, 2*:before, 3*:after { 4 box-sizing: border-box; 5} 6 7body { 8 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", 9 "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, 10 "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 11 font-size: 15px; 12 line-height: 1.8; 13 letter-spacing: .8px; 14 word-break: break-all; 15 color: #333; 16} 17 18a { 19 text-decoration: none; 20 color: #1ca9e3; 21} 22 23img { 24 max-width: 100%; 25 height: auto; 26 vertical-align: middle; 27 border-style: none; 28} 29 30ul, 31li { 32 list-style: none; 33} 34 35/*-------------------------------- 36 レイアウト 37---------------------------------*/ 38.wrapper { 39 padding-top: 68px; 40} 41 42.section { 43 padding: 120px 0; 44} 45 46.section:nth-of-type(odd) { 47 background-color: #f7f7f7; 48} 49 50.inner { 51 max-width: 1380px; 52 margin: 0 auto; 53 padding: 0 40px; 54} 55 56/*-------------------------------- 57ヘッダー 58---------------------------------*/ 59.header { 60 display: flex; 61 align-items: center; 62 justify-content: center; 63 height:800px; 64 background-image:url(../img/DSC_1040-2.jpg) ; 65 background-size: cover; 66 background-position: center; 67 position: relative;} 68 69.overlay{ 70 z-index: 4; 71position: absolute; 72bottom: 0; 73top: 0; 74left: 0; 75right: 0; 76background: linear-gradient(135deg, #ff5db1 0%, rgba(0, 87, 137, 0.8) 100%); 77} 78 79.logo { 80 position: relative; 81 margin-bottom: 30px; 82 padding: 0 20px; 83 text-align: center; 84} 85 86.logo-title { 87 font-family: "Open sans", sans-serif; 88 font-size: 64px; 89 line-height: 1; 90 letter-spacing: .2em; 91} 92 93.logo-subtitle { 94 font-size: 20px; 95 margin-top: 5px; 96 text-align: center; 97 letter-spacing: .2em; 98} 99 100/*-------------------------------- 101 Feature 102---------------------------------*/ 103 104#feature-section { 105 position: relative; 106 z-index:5; 107 } 108 109#feature-section ::after { 110 content:''; 111 position: absolute; 112 left:0; 113 top:0; 114 transform: skewY(2deg) ; 115 transform-origin: top right; 116 117 118z-index: -1; 119width:100%; 120height:100%; 121background:#FFF; 122} 123 124.feature-item { 125 display: flex; 126 flex-wrap: wrap; 127} 128 129.feature-image-wrapper { 130 flex: 0 0 45%; 131 margin-right: 40px; 132} 133 134.feature-body { 135 flex: 1; 136} 137 138.feature-body p:not(:last-child) { 139 margin-bottom: 20px; 140} 141 142 143
回答2件
0
ベストアンサー
原因は、
#feature-section ::after {
で疑似要素の前に半角空白があることですね。
これを削除すればギザギザはなくなります。
#feature-section::after {
半角空白があることで、子要素すべてに疑似要素が追加されてそれぞれが微妙に位置が違うのでギザギザになっているのだと思われます。
別案
clip-path を使えば疑似要素を使わなくても、直接斜めに切り取れますね。
css
1#feature-section { 2 background:#FFF; 3 clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 calc(100% - 5vw)); 4 margin-top: -5vw; 5}
投稿2020/11/21 02:11
編集2020/11/21 02:25
総合スコア34075
0
単純に::afterの前のスペースが余計
css
1#feature-section ::after { 2↓↓↓ 3#feature-section::after {
投稿2020/11/21 01:21
編集2020/11/21 01:55
総合スコア116730
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/21 02:35