這是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