使用html+css實(shí)現(xiàn)以下圖形(不能用圖片)

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市探遵,隨后出現(xiàn)的幾起案子窟赏,更是在濱河造成了極大的恐慌,老刑警劉巖箱季,帶你破解...
    沈念sama閱讀 212,080評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涯穷,死亡現(xiàn)場離奇詭異,居然都是意外死亡藏雏,警方通過查閱死者的電腦和手機(jī)拷况,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,422評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诉稍,“玉大人蝠嘉,你說我怎么就攤上這事”蓿” “怎么了蚤告?”我有些...
    開封第一講書人閱讀 157,630評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長服爷。 經(jīng)常有香客問我杜恰,道長,這世上最難降的妖魔是什么仍源? 我笑而不...
    開封第一講書人閱讀 56,554評論 1 284
  • 正文 為了忘掉前任心褐,我火速辦了婚禮,結(jié)果婚禮上笼踩,老公的妹妹穿的比我還像新娘逗爹。我一直安慰自己,他們只是感情好嚎于,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,662評論 6 386
  • 文/花漫 我一把揭開白布掘而。 她就那樣靜靜地躺著挟冠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪袍睡。 梳的紋絲不亂的頭發(fā)上知染,一...
    開封第一講書人閱讀 49,856評論 1 290
  • 那天,我揣著相機(jī)與錄音斑胜,去河邊找鬼控淡。 笑死,一個胖子當(dāng)著我的面吹牛止潘,可吹牛的內(nèi)容都是我干的掺炭。 我是一名探鬼主播,決...
    沈念sama閱讀 39,014評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼覆山,長吁一口氣:“原來是場噩夢啊……” “哼竹伸!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起簇宽,我...
    開封第一講書人閱讀 37,752評論 0 268
  • 序言:老撾萬榮一對情侶失蹤勋篓,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后魏割,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體譬嚣,經(jīng)...
    沈念sama閱讀 44,212評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,541評論 2 327
  • 正文 我和宋清朗相戀三年钞它,在試婚紗的時候發(fā)現(xiàn)自己被綠了拜银。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,687評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡遭垛,死狀恐怖尼桶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情锯仪,我是刑警寧澤泵督,帶...
    沈念sama閱讀 34,347評論 4 331
  • 正文 年R本政府宣布,位于F島的核電站庶喜,受9級特大地震影響小腊,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜久窟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,973評論 3 315
  • 文/蒙蒙 一秩冈、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧斥扛,春花似錦入问、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,777評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽卷仑。三九已至,卻和暖如春麸折,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背粘昨。 一陣腳步聲響...
    開封第一講書人閱讀 32,006評論 1 266
  • 我被黑心中介騙來泰國打工垢啼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人张肾。 一個月前我還...
    沈念sama閱讀 46,406評論 2 360
  • 正文 我出身青樓芭析,卻偏偏與公主長得像,于是被迫代替她去往敵國和親吞瞪。 傳聞我的和親對象是個殘疾皇子馁启,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,576評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形,我收集了32種圖形芍秆,在下面列出惯疙。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,509評論 0 8
  • 轉(zhuǎn)載請標(biāo)明出處:http://www.aiuxian.com/article/p-1982467.html 接下來...
    lucky_yaya閱讀 6,759評論 3 9
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案怀读? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • 1.行內(nèi)元素和塊級元素?img算什么?行內(nèi)元素怎么轉(zhuǎn)化為塊級元素? 行內(nèi)元素:和有他元素都在一行上诉位,高度、行高及外...
    極樂君閱讀 2,411評論 0 20
  • TCP/IP分層 鏈路層:有時候也被稱為數(shù)據(jù)鏈路層或者網(wǎng)絡(luò)接口層菜枷,通常包括操作系統(tǒng)中的設(shè)備驅(qū)動程序和計(jì)算機(jī)中對應(yīng)的...
    weibo閱讀 359評論 0 0