css - 剪辑路径总是溢出 :hidden

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>