下の画像の表示方法で要素を傾斜できるようにしたいのですが。
私はそれをいじっていますが、その形状を複製することに近づくことができないようです。
私のCSSコードは
transform:skew(30deg,30deg);
変換はこれを行う正しい方法ですか?ブラウザと互換性のある最高のソリューションを教えてください。
次の前に、X軸を中心に回転変換を適用し、適切なpespective
を適用できます。
div {
width:300px;
height:200px;
background:url(http://placekitten.com/300/200);
border:2px solid red;
border-top-width:4px;
border-bottom-width:1px;
-webkit-transform: perspective(200px) rotateX(40deg);
margin:100px;
}
これを試して:
<div class="trapezium"></div>
.trapezium {
border-bottom: 80px solid #fff;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
height: 0;
width: 120px;
position: relative;
margin: 2em auto;
}
.trapezium:before {
border-bottom: 90px solid #000;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
padding: 0 8px 0 0;
height: 0;
width: 130px;
position: absolute;
bottom: -85px;
left: -55px;
content: "";
z-index: -1;
}
これがですDemo