带斜边的按钮和div（CSS）

Question

我试图用对角线制作按钮和div。当我制作一个中等大小的盒子（300px x 200px）它有点工作（我使用：之后和一个旋转的div），但对于较小的元素，如菜单和按钮，它没有正确对齐。我已经坚持了几个小时，并且不知道如何正确地制作它们。我也在这里和谷歌尝试过建议和例子，但不适合我的情况。如果可能的话，我想在菜单部分使用ul。

以下是我想要实现的目标的图像：

这是我到目前为止所得到的：https://jsfiddle.net/3ywsrufa/（请参阅所有代码的jsfiddle）。它工作不正常，但你知道我想要做什么。

.box .box-top:after {
  position: absolute;
  height: 150%;
  width: 100%;
  z-index: 90;
  content: " ";
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
  transform-origin: 15% 0;
  -webkit-transform-origin: 15% 0;
  -ms-transform-origin: 15% 0%;
  left: 0px;
  top: 0px;
  background: #fff;
}

Answer 1

自从你问这个以来已经 9个月，这是我的2¢。

我认为你在父元素上寻找的是perspective。如果一张图片胜过千言万语，那么一个实时片段值得一千个解释：

#awesome-container {
    -webkit-perspective: 50em;
       -moz-perspective: 50em;
            perspective: 50em;
    -webkit-perspective-origin: 40% 40%;
       -moz-perspective-origin: 40% 40%;
            perspective-origin: 40% 40%;
}
#awesome-child {
    -webkit-transform: rotateX(20deg) rotateY(0deg);
       -moz-transform: rotateX(20deg) rotateY(0deg);
            transform: rotateX(20deg) rotateY(0deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    
    /* unrelated */
    height: 200px;
    width: 70%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #34495e;
    font-family: sans-serif;
}

<div id="awesome-container">
    <div id="awesome-child"> BADOOP </div>
</div>

此示例已包含足够的供应商前缀，用于终身供应不受支持的浏览器（查看Can I use?页面，唯一缺少支持的是IE9 - ）。

我建议您使用transform，perspective和perspective-origin值来实现您想要的风格。

希望它仍与您相关！ （我是谁开玩笑）