Question

是否有一种方法可以切断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>

“溢出：隐藏”选项，用于切断div容器上方的元素

1 个答案: