今天前端哥分享是使用html css各种图形样式代码，有css上三角形,下三角形,左三角形,右三角形,平行四边形,爱心,切角,梯形,五边形,六边形,八边形,六角星,椭圆,圆形,图形变换动画,需要参考学习或者用到的兄弟们可以直接赋值
上干货（上代码）：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>html css各种图形样式代码_前端哥</title> <style type="text/css"> .main { width: 100%; height: auto; } .main::after { display: block; content: ""; clear: both;} .show { float: left; margin: 20px 20px;} .traingle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } .bottom-traingle { width: 0 height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;} .left-traingle { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;} .right-traingle { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red border-bottom: 50px solid transparent;} .parallelogram {width: 160px; height: 100px; background: #f00; transform: skew(30deg);} .love { position: relative; margin-right: 200px; } .love::before, .love:after { content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .love:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; } .notching { width: 40px; height: 40px; padding: 40px; background: -webkit-linear-gradient(315deg, transparent 15px, red 0) top left, -webkit-linear-gradient(225deg, transparent 15px, red 0) top right, -webkit-linear-gradient(135deg, transparent 15px, red 0) bottom right, -webkit-linear-gradient(45deg, transparent 15px, red 0) bottom left; background: linear-gradient(135deg, transparent 15px, red 0) top left, linear-gradient(-135deg, transparent 15px, red 0) top right, linear-gradient(-45deg, transparent 15px, red 0) bottom right, linear-gradient(45deg, transparent 15px, red 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } .trapezoid { position: relative; width: 60px; padding: 60px; } .trapezoid::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform: perspective(20px) scaleY(1.3) rotateX(5deg); transform: perspective(20px) scaleY(1.3) rotateX(5deg); -webkit-transform-origin: bottom; transform-origin: bottom; background: red; } .pentagon { position: relative; width: 60px; margin-bottom: 100px !important; border-bottom: 60px solid red; border-left: 40px solid transparent; border-right: 40px solid transparent; } .pentagon::before { content: ""; position: absolute; border-top: 60px solid red; border-left: 70px solid transparent; border-right: 70px solid transparent; top: 60px; left: -40px; } .hexagon { position: relative; width: 60px; margin-bottom: 120px !important; border-bottom: 60px solid red; border-left: 40px solid transparent; border-right: 40px solid transparent; } .hexagon::before { content: ""; position: absolute; width: 60px; height: 0px; top: 60px; left: -40px; border-top: 60px solid red; border-left: 40px solid transparent; border-right: 40px solid transparent; } .octagon { position: relative; width: 40px; height: 100px; background: red; } .octagon::before { content: ""; height: 60px; position: absolute; top: 0; left: 40px; border-left: 30px solid red; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .octagon::after { content: ""; height: 60px; position: absolute; top: 0; left: -30px; border-right: 30px solid red; border-top: 20px solid transparent; border-bottom: 20px solid transparent; } .star { margin: 50px 0; position: relative; width: 0; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(35deg) scale(0.6); transform: rotate(35deg) scale(0.6); } .star:before { content: ''; position: absolute; border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; top: -45px; left: -65px; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } .star:after { content: ''; position: absolute; color: red; top: 3px; left: -105px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); transform: rotate(-70deg); } .sixstar { position: relative; width: 0; margin-bottom: 100px !important; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } .sixstar:after { content: ""; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; top: 30px; left: -50px; } .eightstar { position: relative; width: 100px; height: 100px; margin-bottom: 100px !important; background-color: red; -webkit-transform: rotate(30deg); transform: rotate(30deg); } .eightstar::before { content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: red; } .twelvestar { position: relative; width: 100px; height: 100px; margin-bottom: 100px !important; background-color: red; -webkit-transform: rotate(30deg); transform: rotate(30deg); } .twelvestar::before { content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; -webkit-transform: rotate(30deg); transform: rotate(30deg); background-color: red; } .twelvestar::after { content: ""; position: absolute; top: 0; left: 0; width: 100px; height: 100px; -webkit-transform: rotate(60deg); transform: rotate(60deg); background-color: red; } .ellipse { width: 120px; height: 160px; background-color: red; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } /* 圆形 */ .circle { width: 100px; height: 100px; background-color: red; clip-path: circle(50px at 50px 50px); } /* 十边形 */ .polygon { width: 100px; height: 100px; background-color: red; clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); } /*Clip-path 多边形过渡动画*/ .polygon-animate { position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: crimson; transition: .3s; clip-path: polygon( 50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%); animation: polygon-ani 5s linear infinite; } @keyframes polygon-ani { 10% { background-color: darkorange; clip-path: polygon( 50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%); } 14% { clip-path: polygon( 50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%); } 24% { background-color: lemonchiffon; clip-path: polygon( 100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%); } 28% { clip-path: polygon( 100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%); } 38% { background-color: darkturquoise; clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%); } 42% { clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%); } 52% { background-color: darkcyan; clip-path: polygon( 50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%); } 56% { clip-path: polygon( 50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%); } 66% { background-color: deepskyblue; clip-path: polygon( 30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } 70% { clip-path: polygon( 30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } 80% { background-color: indigo; clip-path: polygon( 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%); } 84% { clip-path: polygon( 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%); } 94% { background-color: crimson; clip-path: polygon( 50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%); } } /*图形变换动画*/ .triangle2rect { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: aniContainer 2s infinite alternate; } .triangle2rect div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .a { background: deeppink; clip-path: polygon(0% 0%, 0% 100%, 50% 50%); animation: a 2s infinite alternate; } .b { background: deeppink; clip-path: polygon(0% 0%, 100% 0%, 50% 50%); animation: b 2s infinite alternate; } .c { background: deeppink; clip-path: polygon(100% 0%, 100% 100%, 50% 50%); animation: c 2s infinite alternate; } .d { background: deeppink; clip-path: polygon(100% 100%, 0% 100%, 50% 50%); animation: d 2s infinite alternate; } @keyframes a { 0%, 10% { background: deeppink; clip-path: polygon(0% 0%, 0% 100%, 50% 50%); } 90%, 100% { background: #000; clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%); } } @keyframes b { 0%, 10% { background: deeppink; clip-path: polygon(0% 0%, 100% 0%, 50% 50%); } 90%, 100% { background: #000; clip-path: polygon(25% 0%, 50% 0%, 37.5% 100%); } } @keyframes c { 0%, 10% { background: deeppink; clip-path: polygon(100% 0%, 100% 100%, 50% 50%); } 90%, 100% { background: #000; clip-path: polygon(62.5% 0%, 75% 100%, 50% 100%); } } @keyframes d { 0%, 10% { background: deeppink; clip-path: polygon(100% 100%, 0% 100%, 50% 50%); } 90%, 100% { background: #000; clip-path: polygon(100% 0%, 87.5% 100%, 75% 0%); } } @keyframes aniContainer { 0%, 10% { width: 100px; height: 100px; } 90%, 100% { width: 250px; height: 60px; } } </style> </head> <body> <h1 style="text-align: center;">前端哥——html css各种图形样式代码</h1> <div class="main"> <!-- 上三角形 --> <div class="show traingle"></div> <!-- 下三角形 --> <div class="show bottom-traingle"></div> <!-- 左三角形 --> <div class="show left-traingle"></div> <!-- 右三角形 --> <div class="show right-traingle"></div> <!-- 平行四边形 --> <div class="show parallelogram"></div> <!-- 爱心 --> <div class="show love"></div> <!-- 切角 --> <div class="show notching"></div> <!-- 梯形 --> <div class="show trapezoid"></div> <!-- 五边形 --> <div class="show pentagon"></div> <!-- 六边形 --> <div class="show hexagon"></div> <!-- 八边形 --> <div class="show octagon"></div> <!-- star --> <div class="show star"></div> <!-- 六角星 --> <div class="show sixstar"></div> <!-- 八角星 --> <div class="show eightstar"></div> <!-- 十二角星 --> <div class="show twelvestar"></div> <!-- 椭圆 --> <div class="show ellipse"></div> <!-- 圆形 --> <div class="show circle"></div> <!-- 十边形 --> <div class="show polygon"></div> <!--Clip-path 多边形过渡动画--> <div class="show polygon-animate"></div> <!--图形变换动画--> <hgroup class="triangle2rect"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> </hgroup> </div> </body></html>