时间戳

首页 > 解决方案 > 为变换元素隐藏溢出

css - 为变换元素隐藏溢出

问题描述

我需要为图像制作一个蒙版，代码是这样的：

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>

但是出现了水平滚动，同时overflow:hidden去掉了blocks的可见性 :after,:before 如何去掉水平滚动？

标签： csscss-selectorsoverflowz-indexpseudo-element

解决方案

推荐阅读