我的页面中有一些方形 div,我将它们用作按钮。如何在不旋转整个正方形的情况下使垂直线有点倾斜?
我想让一个正方形看起来像图 1(绿色)而不是图 2(红色)
这可以通过 css 实现还是应该使用图像?
html:
<div id="square"></div>
css:
#square {
width:50px;
height:50px;
display:block;
background-color:red;
overflow:hidden
}
最佳答案
使用 CSS3 变换:倾斜
#square {
-ms-transform: skew(30deg); /* IE 9 */
-webkit-transform: skew(30deg); /* Chrome, Safari, Opera */
transform: skew(30deg); /* Standard syntax */
transform-origin: bottom left; /* Prevent the bottom from shifting */
}
这是一个 example
关于html - 在 css 中倾斜正方形的垂直线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25437986/