纯CSS实现各种图形效果分享
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
蜀ICP备17017481号-1
川公网安备 51192102000142号