CSSでdivをハートに設定する方法

CSSでハートにdivを設定する方法：まずHTMLのサンプルファイルを作成し、dom要素を用意してそのidをハートに割り当て、疑似要素を操作し、最後に前後を回転させます。目次. ハート型に描くだけ。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 パソコン

CSS を使ってハートの形を描く

ハート型のパターンは、いいねやいいねの取り消しなどの利用シーンでよく見られます。以前の使用方法は、img または backgroundImage として dom に挿入される画像アクセスでした。今度はCSSを使ってハート型の模様を自分で描きます。

ハートの形

次のように dom 要素を用意し、その ID にハートを割り当てます

<div id="heart"></div>

幅と高さを追加します

#heart {
    position: relative;
    width:50px;
    height:40px;
}

幅 50 ピクセル、高さ 40 ピクセルの長方形になるはずですが、もう実行されていません。では、疑似要素を操作してみましょう

/*上一步骤的代码省略...*/
#heart:before,
#heart:after{
  position: absolute;
  left:0;
  top:0;
  content: '';
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 20px 20px 0 0;
}
#heart:after {
  content: '';
  left: 25px;
  top:0
}

emmm... 形状は説明できません。上の図を見てみましょう... ここまでの形状は次のようになります。

次に行うことは、前後のコンテンツを回転することです。コードは次のとおりです:

#heart:before,
#heart:after{
  position: absolute;
  left:25px;
  top:0;
  content: '';
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 40px 40px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart:after {
  content: '';
  left: 0;
  top:0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

上の図...

[推奨学習: css ビデオ チュートリアル]

以上がCSSでdivをハートに設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。