剪辑路径总是溢出：隐藏

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

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

Answer 2

一个想法是使用背景复制相同的形状并避免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>