這是2015阿里巴巴前端實(shí)習(xí)生在線筆試題中的一道題
剛看到這道題的時候膝晾，其實(shí)我是一臉懵逼的赏迟，要實(shí)現(xiàn)這個圖片的效果约素，而且沒有給你圖片洽故。細(xì)看左邊那個圖形贝攒，發(fā)現(xiàn)都是一些簡單得圖形拼成的，那么就可以使用css的border來制作圖形时甚，應(yīng)該是可以實(shí)現(xiàn)的隘弊。
下面是實(shí)現(xiàn)的代碼：
<!DOCTYPE html>
<html>
<head>
<title>picture</title>
<style type="text/css">
.rectangle{
background: #FFF;
border: 10px solid #999999;
padding:10px;
height: 60px;
width: 100px;
}
.circle{
position:absolute;
margin-left: 70px;
margin-top: 5px;
width: 20px;
height: 20px;
background: #999999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.triangle{
width: 0;
height: 0;
position:absolute;
margin-top: 20px;
border-bottom: 40px solid #999999;
border-left: 25px solid transparent;
border-right: 35px solid transparent;
}
.triangle2{
width: 0;
height: 0;
position:absolute;
margin-top: 30px;
margin-left: 40px;
border-bottom: 30px solid #999999;
border-left: 15px solid transparent;
border-right: 35px solid transparent;
}
</style>
</head>
<body>
<div class="rectangle">
<span class="circle"></span>
<span class="triangle"></span>
<span class="triangle2"></span>
</div>
</body>
</html>
效果是這樣的，跟原圖還是很像的：
下面附上使用純css制作各種基本圖形的代碼及原理：
如何工作荒适？
我們先看一段代碼：
.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}
顯示的圖片是這樣的：
由這個例子可以看出來梨熙，當(dāng)高度和寬度都為零時，顯示的就都是border的寬度了刀诬，這時候就可以由border來構(gòu)成我們想要的圖形了咽扇。比如，可以通過設(shè)置某一邊的border然后把其他邊的border設(shè)置為透明色來獲得三角形陕壹，也可以通過設(shè)置border上右下左的不同寬度來使得三角形的高寬不同质欲，而獲得不同角度的三角形等。
我們看一個三角形：
對應(yīng)的css為：
width: 0;
height: 0;
border-bottom: 30px solid #999999;
border-left: 15px solid transparent;
border-right: 35px solid transparent;
1糠馆、三角形都可以通過這種方式產(chǎn)出嘶伟，包括上三角、右三角又碌、下三角九昧、左三角、左上毕匀、右上铸鹰、右下、左下三角等期揪。
2、而長方形和正方形的話可以直接通過div設(shè)置背景顏色得到规个，這樣還可以在div中添加內(nèi)容凤薛，當(dāng)然姓建，如果想直接通過border制作出來也是很簡單得。
3缤苫、圓形的話速兔，css3新增了border-radius屬性，只需要讓寬度和高度一致活玲，然后設(shè)置boeder-radius為他們的一半就ok了涣狗。
4、橢圓形可以使用border-radius的X/Y兩軸取值舒憾，制作出一種變形的圓角镀钓，在配合寬度等值，就制作了類似橢圓形的一個效果镀迂。css如下：
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
更多圖形制作丁溅，請參考http://www.w3cplus.com/css/create-shapes-with-css
