带有对角边的按钮和 div (CSS)

Question

我正在尝试制作带有对角边的按钮和 div。当我制作一个中等大小的盒子（300px x 200px）时，它有点工作（我使用了 :after 和一个旋转的 div），但是对于像菜单和按钮这样的小元素，它没有正确对齐。我已经坚持了几个小时，不知道如何正确制作它们。我也尝试过此处和 Google 上的建议和示例，但不适合我的情况。如果可能的话，我想在菜单部分使用 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 值以获得您想要的样式。

希望它仍然与您相关！ (我在跟谁开玩笑)

带有对角边的按钮和 div (CSS)

Buttons and divs with diagonal sides (CSS)

css

diagonal