当使用CSS实现平行四边形按钮时,可以使用transform
属性和::before
或::after
伪元素来创建。下面是一个示例代码:
<!DOCTYPE html> <html> <head> <style> .button { width: 150px; height: 50px; background-color: #4CAF50; color: white; position: relative; overflow: hidden; } .button:before { content: ""; position: absolute; top: 0; left: -30%; width: 100%; height: 100%; background-color: #8BC34A; transform: skewX(-45deg); } .button span { position: relative; z-index: 1; } </style> </head> <body> <button class="button"> <span>平行四边形按钮</span> </button> </body> </html>
在上面的示例中,我们定义了一个带有.button类的按钮元素,并为其设置了宽度、高度、背景颜色和文字颜色。然后,通过使用::before伪元素,我们创建了一个覆盖整个按钮的矩形,并使用transform: skewX(-45deg)将其旋转成一个平行四边形形状。最后,我们在按钮内部添加了一个<span>元素用于显示按钮文字。
你可以根据需要修改按钮的样式,比如调整宽度、高度、颜色等。希望这个示例对你有帮助!