Clip Path is always overflow:hidden

问题

I made this example:

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>

As you can see, there is a list with 10 numbers but due to clip path property, div behaviour is always as overflow: hidden.

How can I make all the <ul> visible?

回答1:

An idea would be to reproduce the same shape using background and avoid the effect of 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>

UPDATE

If you want an image you can try this

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>

回答2:

You can do it with the :before or :after pseudo-element:

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>

来源：https://stackoverflow.com/questions/50497694/clip-path-is-always-overflowhidden

标签

css

css3

clip-path