ホームページ >ウェブフロントエンド >htmlチュートリアル >要素形状「平行線」_html/css_WEB-ITnose
構造
スタイル
<a href="http://www.jianshu.com/users/47a99e5b5858/latest_articles" class="button"> <div>点击我</div></a>
説明: このメソッドはデザインを実装しますが、HTML 構造の追加レイヤーを追加する必要があります
構造
.button { display: inline-block; padding: 16px 32px; background-color: #58a; color: #fff; text-decoration: none; transform: skew(-45deg);}.button > div { transform: skew(45deg);}
スタイル
<a class="button" href="http://www.jianshu.com/users/47a99e5b5858/latest_articles">点击我</a>
説明: すべてのオフセット 両方とも順番に 0 に設定されます水平方向と垂直方向の両方でメイン要素のサイズに合わせてストレッチするため、このメソッド は、コンテンツを変形せずに要素を変形したい場合 に、他の変形スタイル に適しています いつでも使用できます
《CSSの秘密》