首頁  >  文章  >  web前端  >  css怎麼把div設定成愛心

css怎麼把div設定成愛心

藏色散人
藏色散人原創
2021-03-22 15:08:143485瀏覽

css把div設定成愛心的方法:先建立一個HTML範例檔;然後準備一個dom元素,並為其id賦值為heart;接著操作偽元素;最後將before和after兩塊內容旋轉繪製成心形即可。

css怎麼把div設定成愛心

本文操作環境:Windows7系統、HTML5&&CSS3版,DELL G3電腦

使用css 繪製心形

常會遇到心形圖案,例如按讚和取消按讚的使用場景。之前的使用方式是圖片接入,作為img 或 backgroundImage 插入到 dom 中去。現在自己動手用css繪製心形圖案。

心形

準備一個dom元素如下,為其id賦值為heart

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

新增寬高

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

現在它應該是寬50px,高40px的長方形,沒跑了。現在開始操作偽元素

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

emmm... 形狀無法描述,上圖吧還是...到現在為止的形狀應該是這個樣子的。

css怎麼把div設定成愛心

接下來要做的是將before和after兩塊內容旋轉。程式碼如下:

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

上圖上圖...

css怎麼把div設定成愛心

#【推薦學習:css影片教學

以上是css怎麼把div設定成愛心的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn