百度前端筆試題目--css 實現一個帶尖角的正方形

本文轉載自查看原文 2015-09-14 10:43 2944 web前端/ CSS

今天在牛客網上看到這道題，發現自己並不會，看來自己css都沒怎么學習，也不怎么會用。看了下答案，不是很明白，也在網上搜集了一些資料和解法，感覺一些同學博客上也寫了一些解法和拓展，所以就在這里借鑒一下咯。（參考地址：http://www.ithao123.cn/content-5672159.html）

實現圖示的效果涉及到的知識主要有兩點：一個是before、after偽元素，一個是border

1、before 和 after 都是css中的偽元素，通過給定一個屬性content給元素添加新的內容

before：用來在元素前插入新內容。

after：用來在元素后面插入新內容。

（1）before 給元素添加內容實例：

如果給這個p元素設置一個before：

p:before{ content:"愛你"; }

這個p就變成了：我愛你，content屬性的值就添加到了p元素內容的前面。

（2）after 給元素添加內容實例：

p:after{   content:"20歲了"; }

這個p就會變成：我20歲了

2、利用偽元素設置css樣式，如題目中的尖角，題目只給出一個div，只能弄出左邊的帶邊框正方形，右邊的尖角怎么來的呢？那就可以靠這個偽元素來完成了。

思路解析：

（1）先把正方形畫出來

1 #demo{ 
2   width:100px;  
3   height:100px; 
4   background-color:#fff;  
5   border: 2px #000 solid;
6   position: relative;
7  }

（2）通過before或者after變出一個尖角出來。放到正方形右上角去。

1)首先，我們復習一下border屬性。

border-width：

thin（細邊框） medium （中等邊框）thick（細邊框） 10px（像素值）只有當邊框樣式不是 none 時才起作用

border-style：

dotted （點狀）solid（實線） double（雙線） dashed（虛線）;

border-color：設置不同的顏色

2)boder實例：

一個邊長為20px的正方形，設置border為20px，可得效果：，html代碼如下：

 1 <html>
 2     <head>
 3         <title></title>
 4         <style type="text/css">
 5         #demo{ 
 6                  width:20px;  
 7                   height:20px; 
 8                  background-color:#fff;  
 9                   border: 20px #000 solid;
10                    
11               }
12         </style>
13     </head>
14     <body>
15     <div id="demo">
16 
17     </div>
18     </body>
19 </html>

我們可以根據border-left,border-right,border-top,border-bottom手動設置四個邊框為不同顏色，css代碼如下：

 1 #demo
 2 { 
 3      width:20px;  
 4       height:20px; 
 5      background-color:#fff;  
 6       border-left: 20px pink solid;
 7       border-right:20px red solid;
 8       border-top:20px green solid;
 9       border-bottom:20px blue solid;
10  }

View Code

將div寬度設置為0，則可見四個彩色小三角形。

css代碼修改如下：

#demo
{ 
     width:0px;  
      height:0px; 
     background-color:#fff;  
      border-left: 20px pink solid;
      border-right:20px red solid;
      border-top:20px green solid;
      border-bottom:20px blue solid;
 }

View Code

3）拓展思考，如果將三邊邊框透明，是不是就可以實現一個小三角形？

如果只設置左邊框，不設置其他三個邊框。

#demo
{ 
    width:0px;  
    height:0px; 
    background-color:#fff;  
    border-left: 20px pink solid;
    /*border-right:20px red solid;
    border-top:20px green solid;
    border-bottom:20px blue solid;*/
 }

View Code

實驗結果：頁面空白。原因：因為如果只設置左邊框，而這個div的高度又為0，那這個左邊框是不會向上下兩端擴展。

只不設置左邊框，其余三邊均設置。

#demo
{ 
    width:0px;  
    height:0px; 
    background-color:#fff;  
    border-left: 20px pink solid;
    /*border-right:20px red solid;*/
    border-top:20px green  solid;
    border-bottom:20px blue solid;
 }

View Code

實驗結果：。分析：未設置左邊框，所以上下邊框只向右邊擴展。

只設置左邊框，不設置右邊框，上下邊框設置透明。

#demo
{ 
    width:0px;  
    height:0px; 
    background-color:#fff;  
    border-left: 20px pink solid;
    /*border-right:20px red solid;*/
    border-top:20px transparent solid;
    border-bottom:20px transparent solid;
 }

View Code

實驗結果：分析，上下邊框設置透明，左邊框向上下擴展。

實現一個小三角，先設置四邊透明，再設置顏色，代碼更簡潔：

#demo
{ 
    width:0px;  
    height:0px;  
    border: 20px transparent solid; 
    border-left-color: #000;
}

（3）把三角形放到正方形右側。

　　　　分析：正方形是缺了一段，我們可以讓三角形顏色為白色覆蓋掉正方形的邊框，另外再用一個黑色的比白色三角形大一點的三角形放在白三角形下面，這樣就只漏出了三角形的兩條邊，所以這里就要用到before和after。

　　　1）因為before和after插入的三角形是放在指定的位置的，所以它們的position都設置為絕對定位absolute，那么div就要設置成相對定位relative。

這里首先回顧一下定位的區別：position(static(默認)|relative|fixed|absolute)

　　　　static:按照瀏覽器正常的文檔流擺放 top left right bottom
　　　　relative：相對於static本來位置。即默認的位置
　　　　absolute 相對於父類元素定位，父元素的position必須是relative或者是absolute，如果不是，則繼續往上查找父元素，如果一直找不到，則最后相對於body定位。
　　　　fixed：相對於body元素

　　2）首先繪出黑三角形

 1 #demo:before {
 2     content: ' ';
 3     width: 0;
 4     height: 0;
 5     border: solid transparent;
 6     left: 100%;
 7     top: 18px;
 8     position: absolute;
 9     border-width: 12px;
10     border-left-color: #000;
11 }

　　實驗結果：

3）繪制白色三角形

 1 #demo:after
 2  {
 3     content: ' ';
 4     width: 0;
 5     height: 0;
 6     border: solid transparent;
 7     left: 100%;
 8     top: 20px;
 9     position: absolute;
10     border-width: 10px;
11     border-left-color: #fff;
12  }

實驗結果：

（4）整理CSS重疊屬性，簡化代碼，最終完整頁面HTML代碼如下：

 1 <html>
 2     <head>
 3         <title>demo</title>
 4         <style type="text/css">
 5             #demo 
 6             {
 7                 width: 100px;
 8                 height: 100px;
 9                 background-color: #fff;
10                 position: relative;
11                 border: 2px solid #000;
12             }
13              
14             #demo:before, #demo:after
15             {
16                  border: solid transparent;
17                 content: ' ';
18                 height: 0px;
19                 width: 0px;
20                 left: 100%;
21                 position: absolute;
22             }
23             #demo:before {
24                 border-width: 12px;
25                 border-left-color: #000;
26                 top: 18px;
27                
28             }
29              #demo:after
30             {
31                 top: 20px;
32                 border-width: 10px;
33                 border-left-color: #fff;
34             }
35 
36         </style>
37     </head>
38     <body>
39     <div id="demo">
40 
41     </div>
42     </body>
43 </html>

View Code

（5）終於完全明白了。2015-09-12 meggie

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS 實現一個自適應的正方形百度筆試題目剖析——拼寫糾錯 css 寫正方形並旋轉 CSS實現三角形、梯形、平行四邊形、圓形、橢圓形、對話框、自適應正方形用css畫的一個圖形空心正方形+四邊四色 css實現自適應正方形的多種方法實現 Layout 不可思議（一）—— CSS 實現自適應的正方形卡片 div等比例縮放-------純CSS實現自適應瀏覽器寬度的正方形 119.css如何使圖片固定為正方形 css來控制img正方形自適應