具有对角线边的按钮和div（CSS）
佐芬
我正在尝试使按钮和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;
}
马修斯·阿韦拉尔（Matheus Avellar）
即使您问这个问题已经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>此示例已经包含足够的供应商前缀，可以终身提供不受支持的浏览器（请选中“我可以使用吗？”页面，唯一主要的支持缺失是IE9-）。
我建议您使用和值进行修改transform，以实现所需的样式。perspectiveperspective-origin
希望它仍然与您有关！（我在跟谁开玩笑）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
对角线div与图像
- 2
div 顶部的对角线
- 3
CSS中的对角线
- 4
创建具有对角线边缘的框
- 5
使用CSS在div背景中绘制对角线
- 6
使用CSS创建div的对角线顶部
- 7
使用 html 和 css 创建对角线
- 8
带有（内联）CSS 的对角线边框
- 9
CSS - 带有叠加/背景模糊对角线的图像
- 10
创建矩阵，其中所有对角线在反对角线方向上均具有相同的值
- 11
CSS旋转（对角线）div，节，导航栏和页脚，使用svg或仅转换倾斜，该使用什么？
- 12
通过<div>或<span>的对角线
- 13
如何绘制对角线div？
- 14
如何制作对角线div
- 15
如何制作对角线div
- 16
如何使用CSS绘制对角线
- 17
响应对角线CSS
- 18
CSS使右边框成为对角线
- 19
数组的numpy和反对角线
- 20
求数组对角线和的错误
- 21
带有图像的对角线部分
- 22
使用NumPy查找所有n维线和对角线
- 23
创建仅具有一个对角线一侧的UIView
- 24
具有2D阵列对角线检查的Connect4游戏
- 25
matplotlib是否具有在轴坐标中绘制对角线的功能？
- 26
NumPy-创建具有对角线幂的上三角矩阵
- 27
具有对角线值的R基对称矩阵中的图形可视化
- 28
Matlab：具有非平方向量的块对角线
- 29
使用CSS对角线“切割”一个div
我来说两句