原來css中的border還能夠這樣玩

時間  2019-12-17
標籤 原來 css border 能夠 這樣 欄目 CSS 简体版
原文   原文鏈接

原來css中的border還能夠這樣玩

前面的話：css

　　在看這篇文章以前你可能會以爲border只是簡單的繪製邊框，看了這篇文章，我相信你也會跟我同樣說一句「我靠，原來css中的border還能夠這樣玩」。這篇文章主要是很早之前看了別人用純CSS繪製三角形後本身的一些思路的整理，文中會介紹幾種小圖標的效果。html

用css中的border繪製雞蛋形狀：

　　是的你沒看錯，這裏是要作繪製一個相似於雞蛋的效果。web

　　思路：咱們先用div繪製一個正方形，而後利用設置border-radius: 50%;，這樣咱們就能夠獲得一個圓形的效果，代碼以下：spa

html代碼：3d

<div class="div"></div>

css代碼：code

.div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: aqua;
    text-align: center;
    border-radius: 50%;
}

結果如圖：orm

 

　　思考：分析雞蛋型結構，雞蛋有點橢，可是它分大頭和小頭。咱們有沒有什麼辦法先讓以前的圓變爲橢圓呢？htm

　　思路：咱們改變div的寬度或高度，讓它們不一致，看能不能獲得咱們想要的效果。blog

　　實現：咱們分別改變width:50px;或height:50px;（只改變其中的一個），這時咱們獲得的效果分別爲：數學

 　　思考：咱們已經獲得橢圓效果了，接下來咱們如何實現大頭和小頭的效果呢？

　　 思路一：咱們再把橢圓進行分割而後控制寬度不一致。（此種方法不成功）

 　　思路二：咱們設置border-radius的百分比。當border-radius: 100%;與前一種方法的截圖以下：

　　再次嘗試將border-radius的百分比的值進行分離（不要簡寫，直接寫成4個），而後控制百分比不一致。關鍵代碼：

border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;

 　此時獲得的效果截圖：

 

 

 用css中的border畫三角形：

相信你們都知道border-color是控制邊框顏色的，可是你可能沒這樣試過，來看下面的代碼：

html：

<div class="div"></div>

css：

.div {
    width: 100px;
    height: 100px;
    border: 50px solid transparent;
    border-color: yellow green red aqua;
}

這樣的結果爲：

思考一：若是該div沒有寬高會怎樣？

實現結果：

思考二：前面的效果獲得的是四個三角形，咱們有沒有什麼辦法將三角形從那個div中分離出來呢？

思路：目前沒有接觸過有關div分離的（具體也應該不存在吧），可是咱們來扣一扣CSS的定義「層疊樣式」，轉換咱們的思惟，咱們有沒有什麼方法將咱們不想要的三角形覆蓋掉？

具體作法：將咱們須要的那邊的顏色設置爲咱們的背景色--白色，對的這樣就能夠獲得咱們想要的效果。代碼以下（以想要上邊的三角形爲例）：

border-color: yellow white white white;

是否是這樣就算完成咱們的三角形效果了呢？

咱們能夠試試修改整個body的背景顏色爲黑色，看有什麼變化：

發現該div仍佔據着那麼大的空間，而且背景顏色設置爲白色並非最科學

思考四：咱們該如何將不想要的顏色設置爲消失呢？

思路：咱們將不想要表現出來的顏色設置爲父級容器的背景色，border-color: yellow transparent transparent transparent;

結果以下：

思考三：咱們如何將div設置不佔那麼大的空間呢？

思路：直接將想要的三角形的對邊的border的寬度去掉

具體作法：（此次以想要下面的三角形爲例），代碼以下：

div{
     width:0px;
     height: 0px;
     border-bottom: 50px solid red;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
 }

結果如圖：

關於三角形的擴展的一些思考：

思考一：咱們平時的三角形有銳角三角形，鈍角三角形，直角三角形，等邊三角形，等腰三角形等，咱們有什麼辦法讓咱們直接獲得的就是咱們想要的三角形效果不？

思路：當底邊和水平線平行時，咱們直接經過控制寬高比來實現咱們想要的三角形效果；當與水平線不重合時這個時候就比較複雜了，就須要用到寬高比和CSS3中的transform屬性和rotate相結合，讓咱們的三角形呈現出咱們想要的效果（這裏只是介紹思路，不去具體實現，其中有涉及到數學方面的知識能夠本身百度）。

思考二：咱們能不能用多個三角形在一塊兒拼出更多的形狀？

（這個能夠有，好比說咱們能夠用兩個三角形和一個長方形拼成平行四邊形，甚至說咱們用多個div在一塊兒拼成簡單的小木屋效果……）

補充：

　　一、在咱們思考一的前面那張圖，咱們能夠看到其實那中間的幾個分別是梯形，用一樣的方法，咱們能夠獲得梯形的效果（具體作法再也不另外介紹）。

　　二、經過旋轉，咱們能夠將咱們的正方形變成菱形的效果

 多邊形的製做（以六邊形爲例）

 首先咱們分析一下六邊形，看能不能把它分解成咱們前面有說過的簡單的圖形，下面看圖：

分析：以上面的爲例，咱們能夠看出六邊形由兩個三角形和一個矩形構成。

思考一：咱們有沒有什麼方法將這三個圖形拼在一塊兒？

思路：用僞元素：after和:before，而後在各自的區域繪製圖形

參考代碼以下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>六邊形的製做</title>
        <style type="text/css">
            #hexagon {
                width: 100px;
                height: 55px;
                background: #fc5e5e;
                position: relative;
                margin: 100px auto;
            }
            
            #hexagon:before {
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                top: -25px;
                left: 0;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-bottom: 25px solid yellow;
            }
            
            #hexagon:after {
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                bottom: -25px;
                left: 0;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-top: 25px solid aqua;
            }
        </style>
    </head>

    <body>
        <div id="hexagon"></div>
    </body>

</html>

（固然這裏知識介紹了一種狀況，也能夠嘗試三角形所在的邊不同）

 多角星的製做（以六角星爲例）

 分析：試着用前面的方法，咱們分析六角星的結構，咱們能夠理解爲一個六角星是由兩個三角形一塊兒重疊而成的，接下來就好辦了，咱們直接看代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>六角星</title>
        <style type="text/css">
            
            div {
                width: 0;
                height: 0;
                display: block;
                position: absolute;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                border-bottom: 200px solid #de34f7;
                margin: 10px auto;
            }
              
            div:after {
                content: "";
                /*content插入內容*/
                width: 0;
                height: 0;
                position: absolute;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                border-top: 200px solid #de34f7;
                margin: 60px 0 0 -100px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

 


最終實現效果如圖：

 

五角星的製做（實際操做起來比六角星困難）：咱們先本身畫一個五角星，而後將其分割爲三個，而後利用前面的步驟去實現，這裏我只是列出一種方法做爲參考（其中有幾個細節的處理有點複雜），分析圖以下：

參考代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #star{
                width: 0px;
                height: 0px;
                margin: 50px 0;
                color: red;
                position: relative;
                display: block;
                border-bottom: 70px solid red;
                border-left: 100px solid transparent;
                border-right: 100px solid transparent;
                -webkit-transform: rotate(35deg);
            }
            #star:before{
                content: '';
                width: 0px;
                height: 0px;
                margin: 50px 0;
                color: yellow;
                position: relative;
                display: block;
                border-bottom: 80px solid yellow;
                border-left: 30px solid transparent;
                border-right: 30px solid transparent;
                -webkit-transform: rotate(-35deg);
                top: -45px;
                left: -65px;
            }
            #star:after{
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                display: block;
                top: 3px;
                left: -105px;
                color: #fc2e5a;
                border-right: 100px solid transparent;
                border-bottom: 70px solid #fc2e5a;
                border-left: 100px solid transparent;
                -webkit-transform: rotate(-70deg);
                -moz-transform: rotate(-70deg);
                -ms-transform: rotate(-70deg);
                -o-transform: rotate(-70deg);
                
            }
        </style>
    </head>
    <body>
        <div id="star"></div>
    </body>
</html>

  CSS小圖標效果：

　　到這裏，你是否是還沒看過癮呢？下面在來分享一下本身作的CSS小圖標：對話框的製做

　　對話框的製做：

　　分析：對話框由一個三角形和一個圓角舉行組成

　　實現：代碼以下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            
            div {
                margin: 100px;
            }
            
            #comment_bubble {
                width: 300px;
                height: 100px;
                background: #088cb7;
                position: relative;
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;
                border-radius: 12px;
            }
            
            #comment_bubble:before {
                content: "";
                width: 0;
                height: 0;
                right: 100%;
                top: 38px;
                position: absolute;
                border-top: 13px solid transparent;
                border-right: 26px solid #088cb7;
                border-bottom: 13px solid transparent;
            }
        </style>
    </head>

    <body>
        <p>消息提示框能夠先製做一個圓角矩形，而後在須要的地方放置一個三角形。</p>
        <div id="comment_bubble">

        </div>
    </body>
</html>

 實現結果：

後面的話：

　　雖然這些效果看上去並非那麼的酷，可是記得本身剛開始學到這個的時候好興奮好激動的說。當時作了更多的效果（可是前幾天電腦換系統之前的那些都沒了），因此展現的也只是很簡單的效果。如今還能回憶起來的就這麼多，後面想到了會陸續補充。你們有什麼好的效果歡迎在下面分享。

 

2016年10月22日更新

搜索按鈕：

效果：

代碼：

.sousuo { 
    font-size: 10em; 
    display: inline-block; 
    width: 0.4em; height: 0.4em; 
    border: 0.1em solid red; 
    border-radius: 50%;    
    position: relative; 
}
            
.sousuo:before { 
    content: ''; 
    display: inline-block; 
    position: absolute; 
    right: -0.25em; 
    bottom: -0.1em; 
    border-width: 0; 
    background: red; 
    width: 0.3em; 
    height: 0.14em; 
    -webkit-transform: 
    rotate(45deg); 
}

 用css作本身的logo

效果：代碼：

html部分：

        <ul class="foodoir">
            <li class="f"></li>
            <li class="o"></li>
            <li class="o"></li>
            <li class="d"></li>
            <li class="o"></li>
            <li class="i"></li>
            <li class="r"></li>    
        </ul>

 

css部分：

ul {
    width: 210px;
    height: 100px;
    list-style-type: none;
}

li {
    width: 30px;
    height: 100px;
    background: red;
    float: left;
}

.f {
    background-color: transparent;
    border-bottom: 0;
    position: relative;
    overflow: hidden;
}

.f::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 100px;
    background-color: transparent;
    border: 10px solid #000;
    border-radius: 25px;
    bottom: -25px;
    right: -40px;
}

.f::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 10px;
    background-color: #000;
    top: 35px;
    right: 0px;
}
.o{
    background-color: transparent;
    position: relative;
}
.o::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 16px;
    border: 9px solid #000;
    border-radius: 80%;
    top: 40px;
    left: 1px;
}

.d{
    background-color: transparent;
    position: relative;
}
.d::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 16px;
    border-color: #000;
    border-style: solid;
    border-width: 9px 9px 9px 9px;
    border-radius: 50% 50% 0% 50%;
    top: 40px;
    left: 1px;
}
.d::after{
    content: '';
    position: absolute;
    width: 5px;
    height: 40px;
    border-color: #000;
    border-width: 9px 0px 0px 9px;
    border-style: solid;
    border-radius: 100% 0 0 0;
    top: 5px;
    left: 20px;
}
.i{
    width: 16px;
    background-color: transparent;
    position: relative;
}
.i::before{
    content: '';
    position: absolute;
    width: 12px;
    height: 30px;
    background-color: #000;
    top: 45px;
    left: 2px;
}
.i::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid #000;
    border-radius: 50%;
    top: 30px;
    left: 2px;
}
.r{
    width: 15px;
    background-color: transparent;
    position: relative;
}
.r::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 31px;
    background-color: #000;
    top: 44px;
    left: 2px;
}
.r::after{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: #000;
    border-width: 8px 0px 0px 10px;
    border-style: solid;
    border-radius: 400% 0 0 0;
    top: 45px;
    left: 2px;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程