CSS可以实现任意的图形,特别是CSS3的圆角、旋转、倾斜等效果出现之后,CSS2要想出现斜线,可利用border的特性,利用相邻的边框不同颜色出现斜线的特点,自己体会吧^_^
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>飞翔勿扰-纯CSS实现各种图形效果分享</title> <style> #header { width: 800px; margin: 40px auto 20px; } h1 { position: relative; width: 50%; padding: 10px 20px; border-radius: 0 0 2px 2px; margin: 0 auto; font-size: 20px; font-weight: normal; color: #FFF; background-color: #206020; text-align: center; text-transform: uppercase; } h1:before, h1:after { content: ''; position: absolute; display: block; top: -6px; border: 18px solid #103010; } h1:before { left: -35px; border-right-width: 18px; border-left-color: transparent; } h1:after { right: -35px; border-left-width: 18px; border-right-color: transparent; } h1 span:before, h1 span:after { content: ''; position: absolute; display: block; border-style: solid; border-color: #083808 transparent transparent transparent; top: -6px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } h1 span:before { left: 0; border-width: 6px 0 0 6px; } h1 span:after { right: 0; border-width: 6px 6px 0 0; } #container { width: 800px; margin: 30px auto; background-color: #eee; } div { margin: 20px auto; text-align: center; } /*实心前景和背景*/ .solid { color: #FFF; background-color: green; } /*空心前景和背景*/ .hollow { color: green; background-color: #FFF; border: 4px solid green; } /*长方形*/ .rectangle { width: 200px; height: 100px; line-height: 100px; } /*椭圆长方形*/ .rectangleellipse { position: relative; width: 200px; height: 100px; line-height: 100px; border-radius: 10%/50%; } /*正方形*/ .square { width: 200px; height: 200px; line-height: 200px; } /*圆形*/ .circle { width: 200px; height: 200px; line-height: 200px; border-radius: 50%; } /*实心半圆*/ .halfcirclesolid { width: 200px; height: 100px; line-height: 100px; border-radius: 100px 100px 0 0; color: #FFF; background-color: green; } /*空心半圆形*/ .halfcirclehollow { width: 200px; height: 100px; line-height: 100px; border: 2px solid green; border-radius: 100px 100px 0 0; color: green; } /*斜半圆形*/ .italichalfcirclehollow { width: 200px; height: 200px; line-height: 200px; border-width: 2px; border-style: solid; border-color: green transparent transparent green; border-radius: 100px; color: green; } /*圆锥*/ .cone { width: 0; height: 0; padding: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 100px solid green; border-radius: 50%; } /*弯月亮*/ .moon { width: 200px; height: 200px; padding: 0; border-radius: 50%; box-shadow: 30px 30px 0 0 green; margin-bottom: 30px; } /*椭圆*/ .ellipse { width: 200px; height: 100px; line-height: 100px; border-radius: 50%/50%; } /*三角形*/ .triangle { width: 0; height: 0; padding: 0; font-size: 0; line-height: 0; } /*四色正方形*/ .colorful { border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; } /*实心上直角三角形*/ .rgtsolidtop { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid green; } /*实心右直角三角形*/ .rgtsolidright { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid green; } /*实心下直角三角形*/ .rgtsolidbottom { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 100px solid green; } /*实心左直角三角形*/ .rgtsolidleft { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 100px solid green; } /*实心左上直角三角形*/ .rgtsolidlefttop { border-top: 100px solid green; border-right: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid green; } /*实心右上直角三角形*/ .rgtsolidrighttop { border-top: 100px solid green; border-right: 100px solid green; border-bottom: 100px solid transparent; border-left: 100px solid transparent; } /*实心右下直角三角形*/ .rgtsolidrightbottom { border-top: 100px solid transparent; border-right: 100px solid green; border-bottom: 100px solid green; border-left: 100px solid transparent; } /*实心左下直角三角形*/ .rgtsolidleftbottom { border-top: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid green; border-left: 100px solid green; } /*上等边三角形*/ .eqsolidtop { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 173px solid green; } /*右等边三角形*/ .eqsolidright { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 173px solid green; } /*下等边三角形*/ .eqsolidbottom { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 173px solid green; } /*左等边三角形*/ .eqsolidleft { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 173px solid green; } /*平行四边形*/ .parallelogram { position: relative; width: 240px; height: 120px; padding: 0; } .parallelogram::before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent green green transparent; } .parallelogram::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: green transparent transparent green; } /*平行四边形组成的进度条*/ .progressbar { width: 100%; height: 18px; border: 2px solid green; text-align: left; overflow: hidden; } .progressbar .parallelogram { display: inline-block; width: 40px; height: 20px; padding: 0; margin: 0; } .progressbar .parallelogram::before, .progressbar .parallelogram::after { border-width: 10px; } .progressbar .parallelogram { right: 100%; -webkit-transition: right 4s linear; -moz-transition: right 4s linear; -ms-transition: right 4s linear; -o-transition: right 4s linear; transition: right 4s linear; } .progressbar:hover .parallelogram { right: 0; } /*梯形*/ .trapezoid { width: 120px; height: 0; padding: 0; border-top: 120px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent; } /*五边形*/ .pentagon { position: relative; width: 100px; border-width: 95px 31px 0; border-style: solid; border-color: green transparent; margin-top: 100px; } .pentagon::before { content: ''; position: absolute; top: -152px; left: -31px; width: 0; height: 0; border-width: 0 81px 59px; border-style: solid; border-color: transparent transparent green; } /*六边形*/ .hexagon { position: relative; width: 208px; height: 120px; line-height: 120px; margin-top: 120px; color: #FFF; background-color: green; } .hexagon::before { content: ''; position: absolute; top: -60px; left: 0; width: 0; height: 0; border-width: 0 104px 60px; border-style: solid; border-color: transparent transparent green; } .hexagon::after { content: ''; position: absolute; bottom: -60px; left: 0; width: 0; height: 0; border-width: 60px 104px 0; border-style: solid; border-color: green transparent transparent; } /*八边形*/ .octagon { position: relative; width: 241px; height: 100px; line-height: 100px; margin: 200px auto; color: #FFF; background-color: green; } .octagon::before { content: ''; position: absolute; top: -70px; left: 0; width: 100px; height: 0; border-width: 0 71px 71px; border-style: solid; border-color: transparent transparent green; } .octagon::after { content: ''; position: absolute; bottom: -70px; left: 0; width: 100px; height: 0; border-width: 71px 71px 0; border-style: solid; border-color: green transparent transparent; } /*耳朵*/ .angletwo { position: relative; display: inline-block; width: 240px; height: 120px; } .angletwo::before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent transparent green green; } .angletwo::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent green green transparent; } .anglefour { position: relative; width: 360px; height: 360px; padding: 0; } /*飞镖*/ .fourtop { position: absolute; left: 120px; top: 0; display: block; width: 0; height: 0; padding: 0; border-right: 60px solid transparent; border-bottom: 120px solid green; border-left: 60px solid transparent; } .fourright { position: absolute; right: 0; top: 120px; display: block; width: 0; height: 0; padding: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 120px solid green; } .fourbottom { position: absolute; left: 120px; top: 240px; display: block; width: 0; height: 0; padding: 0; border-top: 120px solid green; border-right: 60px solid transparent; border-left: 60px solid transparent; } .fourleft { position: absolute; left: 0; top: 120px; display: block; width: 0; height: 0; padding: 0; border-top: 60px solid transparent; border-right: 120px solid green; border-bottom: 60px solid transparent; } .fourmiddle { position: absolute; left: 120px; top: 120px; display: block; width: 120px; height: 120px; background-color: green; } /*钻石*/ .diamond { position: relative; width: 120px; height: 0; border-style: solid; border-color: transparent transparent green transparent; border-width: 0 60px 60px 60px; margin-bottom: 300px; color: #FFF; } .diamond::after { content: ''; position: absolute; top: 60px; left: -60px; width: 0; height: 0; border-width: 200px 120px 0; border-style: solid; border-color: green transparent transparent; } /*心形*/ .heart { position: relative; width: 200px; height: 180px; padding: 0; } .heart::before { content: ''; position: absolute; width: 100px; height: 160px; left: 100px; top: 0; border-radius: 100px 100px 0 0; background-color: green; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; tansform-origin: 0 100%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .heart::after { content: ''; position: absolute; width: 100px; height: 160px; left: 0; top: 0; border-radius: 100px 100px 0 0; background-color: green; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /*向右下弯尾箭头*/ .curvearrowrightbottom { position: relative; width: 0; height: 0; border-top: 100px solid transparent; border-right: 100px solid green; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } .curvearrowrightbottom::after { content: ""; position: absolute; top: -120px; left: -90px; width: 120px; height: 120px; border-top: 30px solid green; border-radius: 120px 0 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /*向左上弯尾箭头*/ .curvearrowlefttop { position: relative; width: 0; height: 0; border-bottom: 100px solid transparent; border-left: 100px solid green; -webkit-transform: rotate(-10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } .curvearrowlefttop::after { content: ""; position: absolute; top: -30px; right: -90px; width: 120px; height: 120px; border-bottom: 30px solid green; border-radius: 0 0 120px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /*蝴蝶结*/ .bow { position: relative; width: 240px; height: 120px; } .bow::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid green; border-radius: 60px 60px 0 60px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .bow::after { content: ''; position: absolute; top: 0; left: 120px; width: 60px; height: 60px; border: 20px solid green; border-radius: 0 60px 60px 60px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /*气球*/ .balloon { position: relative; width: 60px; height: 120px; } .balloon::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-radius: 60px 60px 60px 0; background-color: green; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .balloon::after { content: ''; position: absolute; top: 70px; left: 30px; width: 1px; height: 60px; background-color: green; } /*鸡蛋*/ .egg { width: 160px; height: 260px; padding: 0; background-color: green; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; } /*吃货*/ .foodie { width: 0; height: 0; padding: 0; border-width: 60px; border-style: solid; border-color: green transparent green green; border-radius: 60px; } /*太极*/ .taiji { position: relative; width: 192px; height: 96px; padding: 0; border-color: green; border-style: solid; border-width: 4px 4px 100px 4px; border-radius: 100%; background-color: #fff; } .taiji::before, .taiji::after { content: ''; position: absolute; width: 24px; height: 24px; top: 50%; border-radius: 100%; } .taiji::before { left: 0; border: 36px solid green; background-color: #fff; } .taiji::after { left: 50%; border: 36px solid #fff; background-color: green; } /*五角星*/ .starfive { position: relative; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; margin: 200px auto 100px; -moz-transfrom: rotate(36deg); -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); } .starfive::before { position: absolute; left: -210px; top: 8px; display: block; content: ''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; -moz-transfrom: rotate(-72deg); -webkit-transform: rotate(-72deg); -ms-transform: rotate(-72deg); -o-transform: rotate(-72deg); transform: rotate(-72deg); } .starfive::after { position: absolute; left: -196px; top: 0; display: block; content: ''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; -moz-transfrom: rotate(72deg); -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } /*六角星*/ .starsix { position: relative; width: 0; height: 0; margin: 100px auto; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; } .starsix::after { content: ''; position: absolute; top: 60px; left: -100px; width: 0; height: 0; border-top: 200px solid green; border-left: 100px solid transparent; border-right: 100px solid transparent; } /*八角星*/ .stareight { position: relative; width: 200px; height: 200px; line-height: 200px; margin: 50px auto; color: #FFF; background-color: green; } .stareight::before { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: green; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /*十二角星*/ .startwelve { position: relative; width: 200px; height: 200px; margin: 50px auto; background-color: green; } .startwelve::before, .startwelve::after { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; top: 0; left: 0; background-color: green; } .startwelve::before { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } .startwelve::after { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } /*对话气泡框*/ .talkbubble { position: relative; width: 160px; height: 80px; padding: 20px; border-radius: 10px; color: #FFF; background-color: green; text-align: left; } .talkbubble::before { content: ''; position: absolute; right: 100%; top: 40px; width: 0; height: 0; border-top: 15px solid transparent; border-right: 30px solid green; border-bottom: 15px solid transparent; } </style> </head> <body> <header id="header"><h1><span>迷津渡口-纯CSS图形分享</span></h1></header> <div id="container"> <!-- 实心长方形 --> <div class="rectangle solid">实心长方形</div> <!-- 长方形 --> <div class="rectangle hollow">长方形</div> <!-- 实心椭圆长方形 --> <div class="rectangleellipse solid">实心椭圆长方形</div> <!-- 椭圆长方形 --> <div class="rectangleellipse hollow">椭圆长方形</div> <!-- 实心正方形 --> <div class="square solid">实心正方形</div> <!-- 正方形 --> <div class="square hollow">正方形</div> <!-- 实心圆 --> <div class="circle solid">实心圆</div> <!-- 圆形 --> <div class="circle hollow">圆形</div> <!-- 半实心圆 --> <div class="halfcirclesolid">半实心圆</div> <!-- 半圆形 --> <div class="halfcirclehollow">半圆形</div> <!-- 斜半圆形 --> <div class="italichalfcirclehollow">斜半圆形</div> <!-- 圆锥 --> <div class="cone"></div> <p>圆锥</p> <!-- 弯月亮 --> <div class="moon"></div> <p>弯月亮</p> <!-- 实心椭圆 --> <div class="ellipse solid">实心椭圆</div> <!-- 椭圆 --> <div class="ellipse hollow">椭圆</div> <!-- 四色正方形 --> <div class="triangle colorful"></div> <p>四色正方形</p> <!-- 实心上直角三角形 --> <div class="triangle rgtsolidtop"></div> <p>实心上直角三角形</p> <!-- 实心右直角三角形 --> <div class="triangle rgtsolidright"></div> <p>实心右直角三角形</p> <!-- 实心下直角三角形 --> <div class="triangle rgtsolidbottom"></div> <p>实心下直角三角形</p> <!-- 实心左边直角三角形 --> <div class="triangle rgtsolidleft"></div> <p>实心左直角三角形</p> <!-- 实心左上直角三角形 --> <div class="triangle rgtsolidlefttop"></div> <p>实心左上直角三角形</p> <!-- 实心右上直角三角形 --> <div class="triangle rgtsolidrighttop"></div> <p>实心右上直角三角形</p> <!-- 实心右下直角三角形 --> <div class="triangle rgtsolidrig
发表评论