平行四边形
2017-07-27 本文已影响0人
_菡曳_
网页设计中的平行四边形
如图，希望创建一个按钮状的平行四边形链接。如果直接用tansform中的skewX()属性扭曲<a>元素（PS：默认显示为行内的元素display属性一定要记得设置为其他值，如：block或inline-block），会导致文字一起被扭曲。有以下解决方案：
嵌套元素方案
可以添加一层div元素包裹内容，再使用skewX()属性对内容进行反向变形从而抵消容器的变形效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>平行四边形</title>
<style type="text/css" media="screen">
/*嵌套元素方案*/
.button{
display: block;
margin:0 auto;
padding: .3em;
width: 5em;
font-size: 2em;
text-align: center;
text-decoration: none;
color:#fff;
background: #58a;
transform: skewX(-45deg);
}
.button > div{
transform: skewX(45deg);
}
</style>
</head>
<body>
<!-- 嵌套元素方案 -->
<a href="" class="button">
<div>Click me</div>
</a>
</body>
</html>
使用嵌套元素实现的效果
伪元素方案
将所有样式（背景、边框等）应用到伪元素上，然后再对伪元素进行变形。如果希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用position：relative样式，并为伪类元素设置position：absolute，然后再把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。
.button{
display: block;
position: relative;
margin:0 auto;
padding: .3em;
width: 5em;
font-size: 2em;
text-align: center;
text-decoration: none;
color:#fff;
}
.button::before{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skewX(-45deg);
}
