剪辑路径总是溢出：隐藏

Question

我做了这个例子：

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>可见？

Answer 1

一个想法是使用背景重现相同的形状并避免以下效果clip-path：

div {
  background:
     linear-gradient(to top left,transparent 49%,red 50%) right/15% 100%,
     linear-gradient(red,red) left/85% 100%;
  background-repeat: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% 100%,
    url(https://picsum.photos/2000/1000?image=1069) center/cover;
  background-repeat: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>

您还可以更新clip-path以使用比100%

div {
  background:url(https://picsum.photos/2000/1000?image=1069) center/cover no-repeat;
  clip-path: polygon(0 0, 100% 0, 85% 100%,85% 1000%,0% 1000%,0% 100%);
  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>

Answer 2

您可以使用:beforeor: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>