Question

这是代码

<!DOCTYPE html>
<html>
    <head>
        <style> 
            div.p > div
            {
                width: 200px;
                height: 30px;
                overflow: hidden;
                background-color: #FF0;
                transform: rotate(40deg);
                top: 45px;
                position: absolute;
                left: 45px;
            }
            div.p
            {
                width:200px;
                height:300px;
                background-color:red;
                border:2px solid black;
            }

        </style>
    </head>
    <body>
        <div class="p">
            <div></div>
        </div>
    </body>
</html>

请查看此图片https://www.dropbox.com/s/3wrivi3760l3t7f/123.jpg

我想删除黄色div的一角，所以它不应该从它的父div中出来我想在我的网站中使用这种类型的盒子来获取我尝试了很多东西的特色产品但是我无法做到了！

提前致谢。

Answer 1

内部：

div.p

插入：

overflow: hidden;

此外，请在div.p > div中使用此功能获取IE 9+支持：）

-ms-transform: rotate(40deg);

Answer 2

我只是在猜测。

您的内部位置显示为：绝对，因此它不在文档流程中。

我认为因为溢出：隐藏不适用。

但请尝试以下方法：移动溢出：隐藏到.p而不是内部div

如果这不起作用，我会使用三个div，第三个作为边框并使用z顺序。

Answer 3

选中此jsfiddle

div.p
   {
      width:200px;
      height:300px;
      background-color:red;
      border:2px solid black;
      overflow: hidden;
      position:absolute;
   }

在另一个div中使用css wrap div发出问题

3 个答案: