css 是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
下面就几个小案例来教大家如何用css绘制一些图形：
<style>
#triangle { width: 0; border-style: solid; border-width: 50px 50px 50px 50px; border-color: red blue orange gray;
}</style><div id="triangle"></div>登录后复制
效果如图：
<style>
#triangle2 { width: 0; border-style: solid; border-width: 50px 50px 50px 50px; border-color: red red grey grey;
}</style><div id="triangle2"></div>登录后复制
效果如图：
<style>
#triangle3 { width: 0; border-top: 60px solid transparent; border-right: 100px solid transparent; border-bottom: 80px solid red;
}</style><div id="triangle3"></div>登录后复制
效果如图：
<style>
#triangle4 { width: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}</style><div id="triangle4"></div>登录后复制
效果如图：
绘制心形
<style>
#heart { float: left; width: 100px; height: 90px; position: relative;
} #heart:before,#heart:after { position: absolute; top: 0; content: ''; width: 50px; height: 80px; background: red; border-radius: 25px 25px 0 0;
} #heart:before { left: 14px; transform: rotate(-45deg);
} #heart:after { left: 36px; transform: rotate(45deg);
}</style><div id="heart"></div>登录后复制
效果如图：
绘制箭头
<style>
#arrow { margin-top: 105px; float: left; width: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 60px solid red; position: relative;
} #arrow:before,#arrow:after { position: absolute; content: '';
} #arrow:before { border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 20px solid #fff; left: -30px; top: -61px;
} #arrow:after { height: 120px; border-left: 2px solid red; border-right: 2px solid red; left: -2px; top: -161px;
}</style><div id="arrow"></div>登录后复制
效果如图：
绘制五角星
<style>
#star-five { margin: 75px 0 55px 0; float: left; width: 0; height: 0; border-top: 66px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; position: relative;
} #star-five:before,#star-five:after { position: absolute; content: ''; border-top: 66px solid red; border-left: 100px solid transparent; border-right: 100px solid transparent; top: -66px; left: -100px;
} #star-five:before { transform: rotate(-72deg);
} #star-five:after { transform: rotate(72deg);
}</style><div id="star-five"></div>登录后复制
效果如图：
绘制冒泡框/提示框
<style>
#prompt { float: left; width: 200px; height: 100px; margin: 20px 0 40px; border-radius: 20px; background: #669; position: relative;
} #prompt:after { position: absolute; content: ""; width: 50px; height: 120px; border: 0 solid transparent; border-right: 30px solid #669; border-radius: 0 0 50px 0; top: 0; left: 0;
}</style><div id="prompt"></div>登录后复制
效果如图：
绘制气球
<style>
#balloon { float: left; width: 160px; height: 160px; background: #faf9f9;
border-radius: 160px 160px 64px 160px; transform: rotate(45deg);
box-shadow: 0 0 100px 0 rgba(243,98,122,1) inset, 20px 20px 20px rgba(243,98,122,0.3); position: relative;
} #balloon:after { position: absolute; content: '';
border: 8px solid transparent; border-right-color: rgba(243,98,122,0.88);
transform: rotate(45deg); border-radius: 16px;
bottom: -2px; right: -2px;
}</style><div id="balloon"></div>登录后复制
效果如图：
绘制阴阳八卦
<style>
#yin-yang { float: left; width: 48px; height: 96px; background-color: #fff; border-style: solid; border-color: #000; border-width: 2px 50px 2px 2px; border-radius: 50%; -webkit-animation: Rotate 6s linear infinite; /*旋转*/
position: relative;
} #yin-yang:before,#yin-yang:after { position: absolute; content: '';
} #yin-yang:before { width: 12px; height: 12px; background: #fff; border: 18px solid #000; border-radius: 50%; top: 0; left: 50%;
} #yin-yang:after { width: 12px; height: 12px; background: #000; border: 18px solid #fff; border-radius: 50%; top: 50%; left: 50%;
}
@-webkit-keyframes Rotate {
0%{transform: rotate(360deg)}
100%{transform: rotate(0deg)}
}
@keyframes Rotate {
0%{transform: rotate(360deg)}
100%{transform: rotate(0deg)}
}</style><div id="yin-yang"></div>登录后复制
效果如图：
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。看到上面绘制的小图形，是不是绝得很神奇？这些教程很简单很适合初学者来学习哦。
相关教程：
CSS如何实现文字颜色渐变的实例
关于CSS中细节的详解
CSS与JS实现网页加载中的动画效果的实例
如何使用CSS实现圆周运动小球的实例
css中关于选择器的使用总结
以上是css3简单图形绘制教程的详细内容。更多信息请关注PHP中文网其他相关文章！
