(面試題)css
怎麼樣經過 CSS 畫一個三角形:html
1. 元素的 width 和 height 設置爲 0面試
2. 邊框 足夠大動畫
3. 須要的三角形的部分, border-top-color 設置爲 有色spa
4. 不須要的部分 border-right-color,border-bottom-color,border-left-color,設置爲 透明色code
color: rgba(0,0,0,0);
// 或者
color: #0000;
// 或者
color: transparent;
圓角邊框(支持全部元素,不管塊元素,仍是行內元素)orm
#box { width: 300px; height: 200px; border-radius: 150px/100px; // x 軸半徑 / y 軸半徑 }
#box { border-radius: 30px 10px 50px 0; // 左上 右上 右下 左下 border-radius: 30px 10px 50px; border-radius: 30px 10px; border-radius: 30px; }
#box { width: 100px; hright: 200px; border-radius: 0 100% 100% 0; // border-radius: 100% 0 0 100%; } #box { width: 200px; hright: 100px; border-radius: 100% 100% 0 0 ; // border-radius: 0 0 100% 100%; }
#box { width: 100px; hright: 100px; border-radius: 100% 0 0 0; // border-radius: 0 100% 0 0 0; // border-radius: 0 0 100% 0; // border-radius: 0 0 0 100%; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>太極圖</title> <style type="text/css"> #test_box { width: 200px; height: 200px; border-radius: 50%; margin: 30px auto; background-color: red; position: relative; } #test_box #left_box, #test_box #right_box { width: 100px; height: 200px; float: left; } #test_box #left_box { background-color: #000; border-radius: 100px 0 0 100px; } #test_box #right_box { background-color: #fff; border-radius: 0 100px 100px 0; } #test_box #top_box, #test_box #bottom_box { width: 100px; height: 100px; border-radius: 50%; position: absolute; left: 50%; margin-left: -50px; } #test_box #top_box { top: 0; background-color: #000; } #test_box #bottom_box { bottom: 0; background-color: #fff; } #test_box #top_box #white_dot, #test_box #bottom_box #black_dot { width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } #test_box #top_box #white_dot { background-color: #fff; } #test_box #bottom_box #black_dot { background-color: #000; } </style> </head> <body> <div id="test_box"> <div id="left_box"> </div> <div id="right_box"> </div> <div id="top_box"> <div id="white_dot"></div> </div> <div id="bottom_box"> <div id="black_dot"></div> </div> </div> </body> </html>
只用一個 <div> 畫太極陰陽圖 htm
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>神分陰陽</title> <style type="text/css"> body { width: 100%; color: #000; background: #96b377; font: 14px Helvetica, Arial, sans-serif; } #test_box { width: 100px; height: 200px; border-right: 100px solid #fff; border-radius: 50%; margin: 30px auto; background-color: #000; position: relative; top: 0px; left: 0px; } #test_box:before { content: ""; width: 20px; height: 20px; border: 40px solid #000; border-radius: 50%; background-color: #fff; position: absolute; top: 0px; left: 100%; margin-left: -50px; /* 左右 上下 模糊 顏色 */ box-shadow: 4px 0px 4px #a66fe2; } #test_box:after { content: ""; width: 20px; height: 20px; border: 40px solid #fff; border-radius: 50%; background-color: #000; /* 左右 上下 模糊 顏色 */ box-shadow: -5px 0px 4px #c4d0a7; position: absolute; bottom: 0px; left: 100%; margin-left: -50px; } </style> </head> <body> <div id="test_box"> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>弧形凹陷 評論框</title> <style type="text/css"> body {
background-color: #96b377;
}
#test_box { width: 800px; height: 300px; margin: 300px auto 0px; border: 1px solid red; background-color: skyblue; position: relative; top: 0px; left: 0px; } #test_box #arc { width: 100px; height: 100px; border-radius: 50%; background-color: #96b377; border: 1px solid red; position: absolute; top: -70px; left: 70px; } #test_box #arc #mask { width: 102px; height: 100px; background-color: #96b377; position: absolute; top: -32px; left: -1px; } #test_box #arc #circle_login { width: 70px; height: 70px; border-radius: 50%; background-color: #ccc; text-align: center; line-height: 70px; font-size: 24px; position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <div id="test_box"> <div id="arc"> <div id="mask"></div> <div id="circle_login"> 登陸 </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>四葉草旋轉 初探 CSS 動畫</title> <style type="text/css"> body { width: 100%; color: #000; background: #96b377; font: 14px Helvetica, Arial, sans-serif; } #test_box { width: 624px; height: 624px; margin: 60px auto; list-style: none; animation: turnAround 1s linear infinite; } @keyframes turnAround { from {transform: rotate(0deg)} to {transform: rotate(360deg)} } #test_box li { float: left; width: 300px; height: 300px; margin: 5px; border: 1px solid red; background-color: #eee; } #test_box li:nth-child(1), #test_box li:nth-child(4) { border-radius: 0 230px 0 230px; } #test_box li:nth-child(2), #test_box li:nth-child(3) { border-radius: 230px 0 230px 0; } </style> </head> <body> <ul id="test_box"> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>