要素形状「平行線」_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の秘密》