Home>

As the title says.

I saw that it could be solved by writing translate3d (0, 0, 0) after skew, but it had no effect in my case.
I also tried to find out how to use skew, but I'm having trouble understanding it.
I look forward to working with you.

<! DOCTYPE html><html><head><meta charset = "utf-8"><meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no"><meta name = "description" content = "aaaa" /><title>aaaa</title><link href = "https://fonts.googleapis.com/css?family=Open+Sans:700" rel = "stylesheet"><link href = "css/reset.css" media = "all" rel = "stylesheet" type = "text/css" /><link href = "css/photosswipe/photoswipe.css" media = "all" rel = "stylesheet" type = "text/css" /><link href = "css/photosswipe/default-skin/default-skin.css" media = "all" rel = "stylesheet" type = "text/css" /><link href = "style.css" media = "all" rel = "stylesheet" type = "text/css" /><link rel = "shortcut icon" href = "img/favicon.ico" /><link rel = "canonical" href = "URL is entered" /></head><body>  <header>                         a          a         </header><main>
    <!-.feature-section->  <section>                             FEATURE                               <p>            aaaaaa
          </p>                                                                                                        <p>              <span>aaa:</span><br>aaa<br>https: //●●●.com</p>            <p><span>aaa:</span><br>Design/Coding (Responsive)/WordPress/Writing</p>            <p><span
                   >Comments:</span><br>Text Text Text Text Text Text Text Text Text Text Text<br>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
              </p>            <p>                Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>                                    </section>
*,
*: before,
*: after {
  box-sizing: border-box;
}
body {
  font-family: "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro",
  "Yu Gothic Medium", "Yu Gothic Medium", "Yu Gothic", YuGothic,
  "Meiryo", Meiryo, Osaka, "MS Gothic", "MS P Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .8px;
  word-break: break-all;
  color: # 333;
}
a {
  text-decoration: none;
  color: # 1ca9e3;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
}
ul,
li {
  list-style: none;
}
/ * --------------------------------
 Layout
--------------------------------- * /
.wrapper {
  padding-top: 68px;
}
.section {
  padding: 120px 0;
}
.section: nth-of-type (odd) {
  background-color: # f7f7f7;
}
.inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 40px;
}
/ * --------------------------------
header
--------------------------------- * /
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 800px;
  background-image: url (../img/DSC_1040-2.jpg);
  background-size: cover;
  background-position: center;
    position: relative;}.overlay {
  z-index: 4;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
background: linear-gradient (135deg, # ff5db1 0%, rgba (0, 87, 137, 0.8) 100%);
}
.logo {
  position: relative;
  margin-bottom: 30px;
  padding: 0 20px;
  text-align: center;
}
.logo-title {
  font-family: "Open sans", sans-serif;
  font-size: 64px;
  line-height: 1;
  letter-spacing: .2em;
}
.logo-subtitle {
  font-size: 20px;
  margin-top: 5px;
  text-align: center;
  letter-spacing: .2em;
}
/ * --------------------------------
 Feature
--------------------------------- * /
# feature-section {
  position: relative;
  z-index: 5;
    }
# feature-section :: after {
  content:'';
  position: absolute;
  left: 0;
  top: 0;
  transform: skewY (2deg);
  transform-origin: top right;

z-index: -1;
width: 100%;
height: 100%;
background: #FFF;
}
.feature-item {
  display: flex;
  flex-wrap: wrap;
}
.feature-image-wrapper {
  flex: 0 0 45%;
  margin-right: 40px;
}
.feature-body {
  flex: 1;
}
.feature-body p: not (: last-child) {
  margin-bottom: 20px;
}
  • Answer # 1

    The cause is
    # feature-section :: after {
    And there is a half-width space before the pseudo element.
    If you remove this, the jaggedness will disappear.

    # feature-section :: after {

    Due to the half-width space, pseudo elements are added to all the child elements, and the positions of each are slightly different, so it seems that they are jagged.

    Alternative

    If you use clip-path, you can cut diagonally directly without using pseudo elements.

    # feature-section {
      background: #FFF;
      clip-path: polygon (0 0, 100% 5vw, 100% 100%, 0 calc (100% -5vw));
      margin-top: -5vw;
    }

  • Answer # 2

    Simply extra space before :: after

    # feature-section :: after {
    ↓ ↓ ↓
    # feature-section :: after {