«переполнение: скрытая» альтернатива для обрезки элемента над контейнером div - PullRequest
Новая
       6

«переполнение: скрытая» альтернатива для обрезки элемента над контейнером div

0 голосов
/ 24 декабря 2018

Есть ли способ обрезать элемент (в данном случае баннер превратился в -45deg), который находится вне контейнера div, без использования команды "overflow: hidden"?Все было бы хорошо, если бы команда "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>

1 Ответ

0 голосов
/ 24 декабря 2018

Можно считать 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>
...