结构
<a href="http://www.jianshu.com/users/47a99e5b5858/latest_articles" class="button"> <div>点击我</div></a>
风格
立即学习“前端免费学习笔记（深入）”；
.button { display: inline-block; padding: 16px 32px; background-color: #58a; color: #fff; text-decoration: none; transform: skew(-45deg);}.button > div { transform: skew(45deg);}说明：该方法虽然实现设计，但需要添加一层额外的HTML结构
结构
<a class="button" href="http://www.jianshu.com/users/47a99e5b5858/latest_articles">点击我</a>
风格
立即学习“前端免费学习笔记（深入）”；
.button { position: relative; display: inline-block; padding: 6px 32px; color: #fff;}.button::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background-color: #58a; transform: skew(45deg);}说明：所有的偏移量都设为零，目的是让它在水平和垂直方向上都被拉伸至主元素的尺寸；该方法 适用于其他任何变形样式，当我们 想变形一个元素而不想变形它的内容 时就可以用到它
《CSS SECRETS》
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
539
收藏
