Путь клипа всегда переполняется: скрыто - PullRequest
Новая
       6

Путь клипа всегда переполняется: скрыто

0 голосов
/ 24 мая 2018

Я сделал этот пример: 

div {
 -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
 clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
 background-color: red;
 width: 150px;
 height: 150px;
 position: relative;
}
ul{
 position: absolute;
 background-color: green;
 left: 30px;
 top: 50px;
}
<div>
 <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
  </ul>
</div>

Как видите, существует список из 10 чисел, но из-за свойства пути клипа поведение div всегда равно overflow: hidden.

Как я могу сделать все <ul> видимыми?

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Вы можете сделать это с помощью :before или :after псевдоэлемента : 

div {position: relative}
div * {margin: 0; box-sizing: border-box}

div:after {
  content: "";
  position: absolute;
  -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
  background-color: red;
  width: 150px;
  height: 150px;
}

ul {
  position: absolute;
  background-color: green;
  left: 30px;
  top: 50px;
  z-index: 1;
}
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
0 голосов
/ 24 мая 2018

Идея состоит в том, чтобы воспроизвести ту же форму, используя фон, и избежать эффекта clip-path: 

div {
  background:
  linear-gradient(to top left,transparent 50%,red 51%) right/15.5% 100% no-repeat,
  linear-gradient(red,red) left/85% 100% no-repeat;
  width: 150px;
  height: 150px;
  position: relative;
}
ul{
  position: absolute;
  background-color: green;
  left: 30px;
  top: 50px;
}
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

ОБНОВЛЕНИЕ

Если вы хотите изображение, вы можете попробовать это 

div {
  background:
  linear-gradient(to bottom right,transparent 50%,#fff 51%) right/15.5% 100% no-repeat,
  url(https://picsum.photos/2000/1000?image=1069) center/cover no-repeat;
  width: 150px;
  height: 150px;
  position: relative;
}
ul{
  position: absolute;
  background-color: green;
  left: 30px;
  top: 50px;
}
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
...