"overflow: hidden"切断 div 容器上方元素的替代方法

Question

有没有办法在不使用命令"溢出：隐藏"的情况下切断div 容器中的元素（在这种情况下，横幅变为 -45deg）？如果命令"溢出：隐藏"不会导致我的网站抖动，一切都会好起来的。我在这里准备了一个小例子：https：//jsfiddle.net/k0fucpqr/

如果没有，是否可以创建一个横幅，该横幅将在边缘切割到 45 度并正好适合矩形div 容器的角落？

我

不会问我是否知道如何创建这样的元素！

body {
  background-color: #123
}
#card {
  background-color: rgba(0, 0, 0, 0.5);
  transition: .3s ease-in-out;
  -webkit-transition: .3s ease-in-out;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  overflow: hidden;/*cuts the corners from "new-banner*/
  width: 320px;
  height: 180px;
}
#banner-pos {
  position: relative;
}
.new-banner {
  background: linear-gradient( to bottom, #59b0b9 5%, #33777d 95%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  color: #171a21 !important;
  padding: 2px 40px 1px 40px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  cursor: default;
  font-weight: bold;
  position: absolute;
  line-height: normal;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin: 16px -32px;
}

<div id="card">
  <div id="banner-pos">
    <span class="new-banner">free</span>
  </div>
</div>

Answer 1

你可以考虑clip-path

body {
  background-color: #123
}
#card {
  background-color: rgba(0, 0, 0, 0.5);
  transition: .3s ease-in-out;
  border-radius: 4px;*/
  width: 320px;
  height: 180px;
}
#banner-pos {
  position: relative;
}
.new-banner {
  background: linear-gradient( to bottom, #59b0b9 5%, #33777d 95%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  color: #171a21 !important;
  padding: 2px 40px 1px 40px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  cursor: default;
  font-weight: bold;
  position: absolute;
  line-height: normal;
  transform: rotate(-45deg);
  margin: 16px -32px;
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 88% 100%, 12% 100%);
clip-path: polygon(30% 0%, 70% 0%, 88% 100%, 12% 100%); 
}

<div id="card">
  <div id="banner-pos">
    <span class="new-banner">free</span>
  </div>
</div>

或者使用倾斜变换（仅适用于底部或顶部渐变）：

body {
  background-color: #123
}
#card {
  background-color: rgba(0, 0, 0, 0.5);
  transition: .3s ease-in-out;
  border-radius: 4px;*/
  width: 320px;
  height: 180px;
}
#banner-pos {
  position: relative;
}
.new-banner {
  color: #171a21 !important;
  padding: 2px 40px 1px 40px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  cursor: default;
  font-weight: bold;
  position: absolute;
  line-height: normal;
  transform: rotate(-45deg);
  margin: 16px -32px;
  z-index:0;
}
.new-banner::before,
.new-banner::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:38%;
  z-index:-1;
  background: linear-gradient( to bottom, #59b0b9 5%, #33777d 95%);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
.new-banner::before {
   right:50%;
   transform:skewX(-45deg);
   transform-origin:bottom right;
}
.new-banner::after {
   left:50%;
   transform:skewX(45deg);
   transform-origin:bottom left;
}

<div id="card">
  <div id="banner-pos">
    <span class="new-banner">free</span>
  </div>
</div>

或者在主容器上使用多个背景：

body {
  background-color: #123
}
#card {
  background: 
    linear-gradient( 135deg,transparent 4%,#59b0b9 4%, #33777d 8%,transparent 0)
    rgba(0, 0, 0, 0.5);
  transition: .3s ease-in-out;
  border-radius: 4px;*/
  width: 320px;
  height: 180px;
}
#banner-pos {
  position: relative;
}
.new-banner {
  color: #171a21 !important;
  padding: 2px 40px 1px 40px;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  cursor: default;
  font-weight: bold;
  position: absolute;
  line-height: normal;
  transform: rotate(-45deg);
  margin: 16px -32px;
}

<div id="card">
  <div id="banner-pos">
    <span class="new-banner">free</span>
  </div>
</div>