【CSS】绘制各种图形实例

2024-04-27 15:18:44

字体：大中小

来源：转载

供稿：网友

这里写图片描述

【CSS】绘制各种图形实例

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><title>纯CSS绘制各种图形实例</title><style>/*css reset */body { margin: 0; background: #eeffe5;}div { margin-top: 100px;}div:hover { box-shadow: 0 0 8px #d5d5d5; }.wrapper { width: 80%; margin: 0 auto; box-shadow: none !important;}.zheng { width: 100px; height: 100px; background: #f33;}.yuan { width: 100px; height: 100px; background: #f33; border-radius: 55%;}.tuo { width: 150px; height: 100px; background: #f33; border-radius: 55%;}.dengyao△1 { width: 0; height: 0; border: 70px solid transparent; border-bottom: 70px solid #f33;}.dengyao△2 { width: 0; height: 0; border-top: 100px solid transparent; border-left: 100px solid #f33;}.dengyao△3 { width: 0; height: 0; border-top: 100px solid #f33; border-right: 100px solid transparent;}.dengyao△4 { width: 0; height: 0; border: 70px solid transparent; border-top: 70px solid #f33;}.△5 { width: 0; height: 0; border: 70px solid transparent; border-left: 100px solid #f33;}.△6 { width: 0; height: 0; border: 60px solid transparent; border-left: 80px solid #f33; border-right: 80px solid #f33;}.pingxin { width: 140px; height: 80px; background: #f33; -moz-transform: skew(13deg,0deg); -webkit-transform: skew(13deg,0deg); -ms-transform: skew(13deg,0deg); /*ie9*/ transform: skew(13deg,0deg);}.tixin { width: 100px; height: 0; border: 30px solid transparent; border-bottom: 80px solid #f33;}.tixin2 { width: 100px; height: 0; border: 30px solid transparent; border-top: 80px solid #f33;}.yuanjiao { width: 100px; height: 100px; background: #f33; border-radius: 10px;}.yuanjiao2 { width: 100px; height: 100px; background: #f33; border-radius: 20px 0 20px 0;}.yuanjiao3 { width: 100px; height: 100px; background: #f33; border-radius: 0 20px 0 20px;}.yuanjiao4 { width: 100px; height: 100px; background: #f33; border-radius: 40px 40px 40px 40px / 20px 20px 20px 20px;}.yuanjiao5 { width: 100px; height: 100px; background: #f33; border-radius: 25px 25px 25px 25px / 40px 40px 40px 40px;}.shuqian1 { width: 150px; height: 0; border-right: 40px solid transparent; border-bottom: 40px solid #f33;}.shuqian2 { width: 150px; height: 0; border-top: 20px solid #f33; border-bottom: 20px solid #f33; border-right: 30px solid transparent;} .huan1 { width: 100px; height: 100px; background: transparent; border: 7px solid #f33; border-radius: 55%;}.huan2 { width: 200px; height: 100px; background: transparent; border: 5px solid #f33; border-radius: 10px;}.heart { position: relative; width: 100px; height: 90px;}.heart:before,.heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #f33; -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%; /*css终极hack*/}.heart: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%;}.talkbubble { width: 120px; height: 80px; background: #f33; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}.talkbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid #f33; border-bottom: 13px solid transparent;}.taiji { width: 96px; height: 48px; background: #f8f8f8; border-color: #f33; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative;}.taiji:before { content: ""; position: absolute; top: 50%; left: 0; background: #f8f8f8; border: 18px solid #f33; border-radius: 100%; width: 12px; height: 12px;}.taiji:after { content: ""; position: absolute; top: 50%; left: 50%; background: #f33; border: 18px solid #f8f8f8; border-radius:100%; width: 12px; height: 12px;}.moon { width: 150px; height: 150px; border-radius: 55%; box-shadow: 15px 15px 0 1px #f33;}.search { width: 40px; height: 40px; background: transparent; border-radius: 55%; border: 2px solid #f33; position: relative; box-sizing: content-box;}.search:before { display: inline-block; content: ''; width: 22px; height: 3px; background: #f33; position: absolute; top: 41px; left: 31px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); box-sizing: content-box;}.btn-submit { display: block; width: 42px; height: 35px; position: relative;}.btn-submit:before { display: block; content: ""; width: 12px; height: 12px; border: 2px solid #999; border-radius: 20px; background: transparent; position: absolute; left: 10px; top: 7px; box-sizing: content-box;}.btn-submit:after { display: block; content: ''; width: 10px; height: 2px; background: #999; position: absolute; top: 22px; left: 21px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); box-sizing: content-box;}.wujiao { margin:50px 0; position:relative; display:block; color:#f33; width:0px; height:0px; border-right:100px solid transparent; border-bottom:70px solid #f33; border-left:100px solid transparent; -moz-transform:rotate(35deg); -webkit-transform:rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg);}.wujiao:before { border-bottom:80px solid #f33; border-left:30px solid transparent; border-right:30px solid transparent; position:absolute; height:0; width:0; top:-45px; left:-65px; display:block; content:''; -webkit-transform:rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg);}.wujiao:after { position:absolute; display:block; color:#f33; top:3px; left:-105px; width:0px; height:0px; border-right:100px solid transparent; border-bottom:70px solid #f33; border-left:100px solid transparent; -webkit-transform:rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg); content:'';}.wubian { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: #f33 transparent;}.wubian:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #f33;}.yuanque { width: 0; height: 0; border: 50px solid #f33; border-radius: 55%; border-right: 50px solid transparent;}</style></head><body> <div class="wrapper"> <div class="zheng" title="正方形"></div> <div class="yuan" title="圆形"></div> <div class="tuo" title="椭圆"></div> <div class="dengyao△1" title="等腰直角三角形1"></div> <div class="dengyao△2" title="等腰直角三角形2"></div> <div class="dengyao△3" title="等腰直角三角形3"></div> <div class="dengyao△4" title="等腰直角三角形4"></div> <div class="△5"></div> <div class="△6"></div> <div class="pingxin"></div> <div class="tixin"></div> <div class="tixin2"></div> <div class="yuanjiao"></div> <div class="yuanjiao2"></div> <div class="yuanjiao3"></div> <div class="yuanjiao4"></div> <div class="yuanjiao5"></div> <div class="shuqian1"></div> <div class="shuqian2"></div> <div class="moon"></div> <div class="huan1"></div> <div class="huan2"></div> <div class="heart"></div> <div class="talkbubble"></div> <div class="taiji"></div> <div class="search"></div> <div class="btn-submit"></div> <div class="wujiao"></div> <div class="wubian"></div> <div class="yuanque"></div> <div class=""></div> </div></body></html>

上一篇：判断字符串中出现次数最多的字符和出现次数

下一篇：webpack安装