overflow hidden for transform elements

Question

I needed to make a mask for the image, the code is like this:

body {margin:0;padding:0;}
.new-header-page-wrapper {
    width:100%;
  height:100vh;
  background: linear-gradient(
180deg
, rgb(0 0 0 / 18%) 0%, rgba(0,0,0,0.6166841736694677) 100%),url(https://atmjet.ru/assets/images/main/mainimage.jpg)no-repeat;
    background-position: center;
}
.wrap-triangle {
  position:relative;
  /*overflow:hidden;*/
}
.main-triangle:after {
  content: "";
  position: absolute;
  width: 51%;
  height: 140px;
  top: -72px;
  left: -1%;
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  transform: rotate(7deg);
  background: white;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.main-triangle:before {
  content: "";
  position: absolute;
  width: 51%;
  height: 140px;
  top: -72px;
  right: -1%;
  -webkit-transform: rotate(-7deg);
  -moz-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
  transform: rotate(-7deg);
  background: white;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

<body>
<div class="new-header-page-wrapper">
</div>
<div class="wrap-triangle">
    <div class="main-triangle">
    </div>
</div>
</body>

But there was a horizontal scrolling, at the same time overflow:hidden removes the visibility of blocks :after,:before How to remove horizontal scrolling?

overflow hidden for transform elements

0 Answers0