CSS實現三角形、梯形、平行四邊形、圓形、橢圓形、對話框、自適應正方形

来源:https://www.cnblogs.com/wuguanglin/archive/2018/03/31/interestingCSS.html
-Advertisement-
Play Games

本文篇幅較長，希望能堅持看完，轉載請註明出處，如果覺得好文請給個贊吧 CSS實現梯形 CSS實現三角形和梯形主要是依靠border是梯形的特性來做的，有點像相框的那種感覺。 首先我們先給一個正方形設置比較寬的邊框。如下。 <div id="test1"></div> <style> #test1{ ...


本文篇幅較長，希望能堅持看完，轉載請註明出處，如果覺得好文請給個贊吧

CSS實現梯形

CSS實現三角形和梯形主要是依靠border是梯形的特性來做的，有點像相框的那種感覺。

首先我們先給一個正方形設置比較寬的邊框。如下。

    
<div id="test1"></div>
    <style>
#test1{
    width: 50px;
    height: 50px;
    background: purple;
    border-top: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid blue;
    border-right: 50px solid yellow;
    margin:0 auto;
}
</style>

然後把其他顏色設置成看不見的顏色，我們就得到了梯形

 

  
<div id="test2"></div>
<style>
    #test2{
        width: 50px;
        height: 50px;
        background: transparent;
        border-top: 50px solid transparent;
        border-bottom: 50px solid green;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
</style>

 

CSS實現三角形

三角形同理可得，只要把中間的正方形的寬高設為0就行，如下

    
<div id="test3"></div>
<style>
    #test3{
        width: 0;
        height: 0;
        display: inline-block;
        background: transparent;
        border-top: 50px solid transparent;
        border-bottom: 50px solid green;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }
</style>
此外，我們通過設置不同邊框的寬度或者顏色，可以得到不一樣的三角形或者梯形                

 

CSS實現平行四邊形

我們既然有了三角形和梯形或者長方形，可以得到平行四邊型呢！！！！

首先，先來兩個三角形，如下

     再通過CSS3中的transform屬性將兩個三角形移動下位置，就可以實現自己的要求啦。當然你也可以用絕對定位來移動。    

 CSS實現圓形

使用CSS3屬性border-radius可以實現一個圓形。

<div id="circle"></div>
<style>
    #circle{
        width: 100px;
        height: 100px;
        background: blue;
        border-radius: 50px;
    }
</style>

 

CSS實現橢圓形

這時候我們就要好好瞭解下border-radius這個屬性了，border-radius有一個水平半徑和一個垂直半徑

border-radius: 水平半徑 / 垂直半徑;//當然也可以單獨設置某個角的水平半徑和垂直半徑

border-radius: 左上角水平半徑、 右上角水平半徑、 右下角水平半徑、 左下角水平半徑 / 左上角垂直半徑、 右上角垂直半徑、 右下角垂直半徑、 左下角垂直半徑

好了那麼我們就可以實現一個橢圓形了

<div id="oval"></div>
<style>
    #oval{
        width: 100px;
        height: 50px;
        background: blue;
        border-radius: 50px / 25px;
    }
</style>

等價於

<div id="oval"></div>
<style>
    #oval{
        width: 100px;
        height: 50px;
        background: blue;
        border-top-left-radius: 50px 25px;
        border-top-right-radius: 50px 25px;
        border-bottom-left-radius: 50px 25px;
        border-bottom-right-radius: 50px 25px;
    }
</style>

 

CSS實現對話框

好了有了之前的三角形、橢圓形，我們就可以形成各種各樣的對話框啦~~~~~~

主要實現原理就是通過兩個三角形的“疊加覆蓋”，來形成對話框的尖角

樣例1：

    CSS”實現對話框效果一 
<div class="test1">
    <div class="bot">&nbsp;</div>
    <div class="top">&nbsp;</div>
    CSS實現對話框效果一
</div>
<style>
.test1{width:300px;height: 30px; padding:30px 20px; margin-left:100px; background: #eb7956; position:relative;}
.test1 div{ width:0; height:0; position:absolute;}
.test1 .bot{
    border-width:20px;
    border-style:solid;
    border-color:#ffffff #eb7956 #eb7956 #ffffff;
    left:-40px;
    top:40px;
}
.test1 .top{
    border-width:10px 20px;
    border-style:solid;
    border-color: transparent  #ffffff #ffffff transparent ;
    left:-40px;
    top:60px;
}
</style>

 樣例2：

    CSS實現對話框效果二

 

<div class="test2">
    <div class="bot"></div>
    <div class="top"></div>
    CSS實現對話框效果e二
</div>
<style>
    .test2{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
    .test2 div{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
    .test2 div.bot{
        border-width:20px;
        border-style:solid dashed dashed;
        border-color:#beceeb transparent transparent;
        left:80px;
        bottom:-40px;
    }
    .test2 div.top{
        border-width:20px;
        border-style:solid dashed dashed;
        border-color:#ffffff transparent transparent;
        left:80px;
        bottom:-33px;
    }
</style>

 樣例3

<div class="test3">
    <div class="bot">&nbsp;</div>
    <div class="top">&nbsp;</div>
    CSS實現對話框效果三
</div>
<style>
.test3{
    width:300px;
    height: 30px;
    border-radius: 160px/45px;
    padding:30px 20px;
    margin-left:100px;
    background: #eb7956;
    position:relative;
}
.test3 div{ width:0; height:0; position:absolute;}
.test3 .bot{
    border-width:20px;
    border-style:solid;
    border-color:transparent #eb7956 #eb7956 transparent;
    left:-30px;
    top:40px;
}
.test3 .top{
    border-width:10px 20px;
    border-style:solid;
    border-color: transparent  #ffffff #ffffff transparent ;
    left:-30px;
    top:60px;
}
</style>

此外，IE6下有些bug需要做下相容

1. IE6的奇偶bug
如果定位外框高度或是寬度為奇數，則IE6下，絕對定位元素的低定位和右定位會有1像素的誤差。所以，儘量保證外框的高度或寬度為偶數值。

2. IE6的空div莫名高度bug
IE6下，空div會有莫名的高度，也就是說height:0;不頂用，此時形成的尖角的實際占高於其他瀏覽器是有差異的。可使用font-size:0; + overflow:hidden;修複此問題。

3. IE6不支持實線邊框透明transparent屬性
IE6不支持實線邊框透明transparent屬性，當某邊框設置為transparent屬性，且有寬度的話，那麼透明會以預設的黑色顯示的。解決方法有兩個，一是將需要隱藏的顏色設置為背景色，這樣與透明效果一樣，此法有局限性，在複雜“邊框法”應用下是行不通的；二是可以使用dashed代替solid，可以實現IE6下邊框transparent透明。為什麼能夠實現透明？您可以參考默塵的這篇文章Dotted&Dashed終極分析及IE6透明邊框，我說點題外話，其對原因的解釋似乎說的通，但是，是不是如此，我是相當懷疑的，我尚未有時間驗證，這個可以標記一下。

參考：CSS實現氣泡邊框

CSS實現自適應正方形

正方形應該大家都會，那麼如何實現自適應的正方形呢？有兩種方法

方法一：使用padding-bottom實現正方形

使用padding-bottom實現正方形 
<div id="test7">
    <div class="placeholder">使用padding-bottom實現正方形</div>
</div>
<style>
    #test7{
        width: 400px;
        background: gray;
    }
    .placeholder {
        width: 30%;
        padding-bottom: 30%;/* padding百分比相對父元素寬度計算,用padding去填充height*/
        height: 0;/*避免被內容撐開多餘的高度 */
        background: #4acfff;
    }
</style>

方法二：使用css3單位vw

原理同padding，也是利用了vw是相對寬度，不過要註意是相對視窗寬度哦

<div class="vw"></div>
<style>
    .vw {
        width: 50%;
        height: 50vw;
        background: pink;
    }
</style>

補充：css中的單位

  • px：絕對單位，頁面按精確像素展示
  • em：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算（瀏覽器預設字體是16px），整個頁面內1em不是一個固定的值。
  • rem：相對單位，可理解為”root em”, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持
  • vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
  • vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
  • vmin：vw和vh中較小的那個。
  • vmax：vw和vh中較大的那個。
  • vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持
  • %:百分比
  • in:寸
  • cm:釐米
  • mm:毫米
  • pt:point，大約1/72寸
  • pc:pica，大約6pt，1/6寸
  • ex：取當前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加麽有首碼)
  • ch:以節點所使用字體中的“0”字元為基準，找不到時為0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

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

-Advertisement-
Play Games
更多相關文章
  • 學web前端是自學好還是去培訓機構？
    我個人建議： 如果你條件還可以，負擔不是那麼大，能培訓還是培訓的，培訓一定會比你自學的好，如果培訓都很難學好，那麼自學一定學不好。不過目前的培訓費用都在18000以上，這還只是培訓費而已，加上一些其他的東西，四個月時間要小三萬吧！ 如果條件不允許，也可以選擇自學，自學挺難的，但是如果你韌性強，自學也 ...
  • 小劉同學的第九十八篇博文
    第二節課也聽到一半了，建好了另外的兩張表requst和relation，用圖展示一下它們之間的關係吧。 還是用sequelize生成的，貼一下代碼。 request是加好友請求用到的，兩個belongTo，是為了表示是誰加的誰，這兩個用戶之間的關係。 relation是表示好友關係，多對多的關係，所 ...
  • 網站html代碼解析
    1、什麼是HTML文件？HTML中文叫做“超文本標記語言”，一個HTML文件不僅包含文本內容，還包含一些標記，一個HTML文件的尾碼名是.htm或者是.html。用文本編輯器（Dreamweaver）就可以編寫HTML文件。2、html文件的基本結構：（成對出現）<html> html文件開始 <h ...
  • 基礎業務：滾動到指定位置導航固定（CSS實現）
    最近公司做的業務都是使用Vue、Element寫的，涉及到的相應的基礎業務像輪播、預載入、懶載入，都是使用 NPM上的工具來實現，原理和基礎還是要有的，就來實現幾個項目中常用到的業務。 經常見到這樣的效果，導航在頁面中間，當界面滾動到導航的時候，導航就變成了 佈局。為了看效果，我加了邊框。 剛開始， ...
  • 如何讓博客變得稍稍好看
      這是第一次寫博客玩，也是第一次使用markdown寫東西(一邊看著語法一邊寫的來著)，不過進步還是有滴~   申請博客以後，趕緊去翻了一下wjj童鞋的博客，發現他的封面是這樣的：   嗯……不得不說，這個網站的確是有一丟丟醜。不過怎麼能 ...
  • 回顧ajax
    Ajax 即“Asynchronous Javascript And XML”（非同步 JavaScript 和 XML），是指一種創建交互網頁應用的網頁開發技術。 一. Ajax ajax技術的目的是讓javascript發送http請求，與後臺通信，獲取數據和信息。ajax技術的原理是實例化xml ...
  • 快速使用CSS Grid佈局，實現響應式設計
    常用Grid佈局屬性介紹 下麵從一個簡單Grid佈局例子說起。 CSS Grid 佈局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。 下麵是一個 wrapper 元素，內部包含6個 i ...
  • javaScript設計模式-創建型設計模式
    我們大家一聽到設計模式就感覺設計模式是一個高端的東西，到底什麼是設計模式呢？其實設計模式也就是我們的前輩在寫代碼的時候遇到的問題，提出的解決方案，為了方便人與人之間的交流，取了個名字，叫做設計模式。 創建型設計模式 本文今天主要寫一部分創建型設計模式，創建型設計模式呢就是我門創建對象的時候的一種模式 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類