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

Question

有没有办法在不使用命令 "overflow: hidden" 的情况下切断 div 容器中的元素（在本例中，横幅变为 -45deg）？如果命令 "overflow: hidden" 没有在我的网站上引起抖动，一切都会好起来的。我在这里准备了一个小例子：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>

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

"overflow: hidden" alternative to cut off an element that is over a div container

html

css

css-transforms