CSS3新特性,繪製常見圖形

来源:http://www.cnblogs.com/webonline/archive/2016/11/17/6072177.html
-Advertisement-
Play Games

前言:最近準備做一個自己的網頁,設計稿中導航我準備設計成矩形,也有hover樣式展示的矩形,當中一些頭像等等。以前除了畫圓,好像真沒認真畫過其他圖形,今天就畫畫我們常見到的幾個圖形。 在此之前我們有必要瞭解下什麼是偽元素(和它不同的,還有一個概念叫偽類,兩者容易混淆),沒有它畫不成圖形的。 a)偽元 ...


前言:最近準備做一個自己的網頁,設計稿中導航我準備設計成矩形,也有hover樣式展示的矩形,當中一些頭像等等。以前除了畫圓,好像真沒認真畫過其他圖形,今天就畫畫我們常見到的幾個圖形。

在此之前我們有必要瞭解下什麼是偽元素(和它不同的,還有一個概念叫偽類,兩者容易混淆),沒有它畫不成圖形的。

a)偽元素:用來在內容元素的前後插入額外的元素,之所以叫偽元素,就是它們根本就不在文檔中生成,只能在外部可見,比如:你F12時,在右邊代碼框中是不是可以看到?

這裡用到的兩個偽元素  ①元素之前:before  ②元素之後:after

1)圓,沒必要了,我們看看三角形

/* CSS */
.sanjiao {
        width: 0px;
        height: 0px;
        margin: 30px auto;
        position: relative;
        border: 100px solid transparent;
        border-bottom: 100px solid #3C98D1;/*這裡的100px 就是三角形在豎直方向上高度 也就是三角形的高*/
        /*border-left: 100px solid #96D1DF;/* 還可以寫不同方向上的三角形 */
        border-right: 100px solid #5E5E5E;
        border-top: 100px solid #3C98D1;*/
    }


/* HTML */
<div class="sanjiao"></div>

2)圓柱

/* CSS */
.yuanzhu {
       position: relative;
       height: 200px;
       width: 50px;
       background: #5E5E5E;
       margin: 30px auto;
       z-index: 999 /* 這個層疊順序要設置下 不然看到的圓柱頂部不美觀 看著就不想圓柱了 */
    }

.yuanzhu:before {
    position: absolute;
    top: -10px;
    content: "";
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: #A8A8A8;
    z-index: 99
  }

.yuanzhu:after {
    position: absolute;
    bottom: -10px;
    content: "";
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: #5E5E5E;
    z-index: 9
  }


/* HTML */
<div class="yuanzhu"></div>

3)五角星

畫五角星,我們要先知道瀏覽器幾個私有首碼後跟的樣式中"deg"表示的是旋轉角度,比如“45deg”表示的就是順時針旋轉45度,負的就表示逆時針。

rotate了是transform的其中一個屬性,表示2D旋轉,也就是二維旋轉,它也有三維旋轉,transform還有另外幾個特性,可以去看看http://www.w3school.com.cn/cssref/pr_transform.asp 它的幾個特性,用的好,做出來的特效 逼格還是挺高的

/* CSS */
.wujiaox {
         width: 0px;
         height: 0px;
         position: relative;
         margin: 30px auto;
         border: 100px solid transparent;
         border-bottom: 70px solid #5E5E5E;
         -webkit-transform: rotate(35deg);/* Safari和Chrome */
         -moz-transform: rotate(35deg);/* Firefox */
     -ms-transform: rotate(35deg);/* IE 9 */
     -o-transform: rotate(35deg); /* Opera */
  }

  .wujiaox:after {
      content: "";
      width: 0px;
      height: 0px;
      display: block;
      border-right: 100px solid transparent;
      border-bottom: 70px solid #5E5E5E;
      border-left: 100px solid transparent;
      position: absolute;
      top: 3px;
      left: -105px;
      -webkit-transform: rotate(-70deg);
      -moz-transform: rotate(-70deg);
      -ms-transform: rotate(-70deg);
      -o-transform: rotate(-70deg);
   }


  .wujiaox:before {
      content: "";
      width: 0;
      height: 0;
      border-bottom: 80px solid #5E5E5E;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      top: -45px;
      left: -65px;
      -webkit-transform: rotate(-35deg);
      -moz-transform: rotate(-35deg);/* 逆時針旋轉35度 */
      -ms-transform: rotate(-35deg);
      -o-transform: rotate(-35deg);
    }

/* HTML */
<div class="wujiaox"></div>

畫五角星時,要註意,一定要設置一個content:""; 不然你是看不到偽類元素所表現出的樣式的;兩個偽類元素都要設置為絕對定位,父元素設置相對.

4)聊天框

/* CSS */
      .chatBox { width: 200px; height: 50px; margin: 30px auto; background: #5E5E5E; border-radius: 5px; position: relative; } .chatBox:before { content: ""; position: absolute; width: 0px; height: 0px; right: 100%; top: 15px; border-top: 8px solid transparent; border-right: 10px solid #5E5E5E; border-bottom: 8px solid transparent; }
/* HTML */
<div class="chatBox"></div>

5)八卦圖,其實就是一個大半圓+兩個小圓構成的

/* CSS */
      .bagua {
                width: 96px;
                height: 48px;
                background: #eee;
                margin: 30px auto;
                border-color: #000000;
                border-style: solid;
                border-radius: 100%;
                border-width: 0.5px 0.5px 50px 0.5px;
                position: relative;
            }
            
            .bagua:before {
                content: "";
                border-radius: 100%;
                background: #FFFFFF;
                position: absolute;
                top: 50%;
                left: 0px;
                border: 18px solid #000000;
                width: 12px;
                height: 12px;
            }
            
            .bagua:after {
                content: "";
                border-radius: 100%;
                background: #000000;
                position: absolute;
                top: 50%;
                left: 50%;
                border: 18px solid #eee;
                width: 12px;
                height: 12px;
            }


/* HTML */
<div class="bagua"></div>

6)“磚石”圖形

首先畫一個直角梯形,再通過偽類元素在其下方畫一個三角形

/* CSS */
      .zhuanshi {
                width: 50px;
                height: 0;
                border-style: solid;
                margin: 30px auto;
                border-width: 0 25px 25px 25px;
                position: relative;
                border-color: transparent transparent #5E5E5E transparent;
            }
            
            .zhuanshi:after {
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 70px 50px 0 50px;
                border-color: #5E5E5E transparent transparent transparent;
                position: absolute;
                top: 25px;
                left: -25px;
            }

/* HTML */
<div class="zhuanshi"></div>

 

 

CSS3里還有很多話圖形的方法方式,需要你慢慢去研究,雖然很少用到,但無聊時,拿來畫畫,還是挺有趣的.

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 描述 Description 以下的數字倒直角三角形是由二個數確定的:一個數是行數R,1<=R<=39,另一個是種子數S,1<=S<=9。S放在左上角,照著樣例輸出文件的樣子,寫一個程式,根據輸入的二個數列印出相應的數字倒直角三角形。 輸入格式 Input Format 單獨一行,二個用空格隔開的整 ...
  • ...
  • 1. PHP源碼結構 PHP的內核子系統有兩個,ZE(Zend Engine)和PHP Core.ZE負責將PHP腳本解析成機器碼(也成為token符)後,在進程空間執行這些機器碼;ZE還負責記憶體管理,變數作用域管理和對PHP函數的調度管理。 PHP Core負責和SAPI層的通信;PHP Core ...
  • 首先說明一下,PHP擴展有兩種編譯方式:方式一:在編譯PHP時直接將擴展編譯進去方式二:擴展被編譯成.so文件,在php.ini里配置載入路徑; 以下開始說明創建PHP擴展並編譯的步驟:下載PHP源碼,並解壓,在源碼的根目錄下開始操作,1. 使用ext_skel生成擴展框架,如下: ➜ php-5. ...
  • 碰到個奇葩事啊,一個spring的項目拿到客戶現場部署到resin4中,啟動後各種報無法註入bean,找不到bean的問題.出現大量下圖的錯誤: 除了系統,其他的jdk版本,resin版本,程式包都是在相同測試環境成功部署測試過的,無任何問題.所以想當然的認為可能拿過去的包有問題,馬上本地resin ...
  • ...
  • 1、BootStrap指定的四種屏幕尺寸: ①超大PC屏幕——lg(large):w>=1200px; ②中等PC屏幕——md(medium):1200px>w>=992px; ③Pad屏幕——sm(small):992px>w>=768px; ④Phone屏幕——xs(extra small):7 ...
  • 一款很實用的jQuery滑鼠懸浮有動畫效果的響應式瀑布流插件 線上預覽 下載地址 實例代碼 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...