正文
css样式画图,css画各种图形
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用 CSS 绘制各种形状
制作圆形：
要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID
div id="circle"/div
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：
#circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
2
制作椭圆形：
椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作
div id="oval"/div
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
#oval {
width: 200px;
height: 100px;
background: #e9337c;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
3
制作三角形：
要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。
div id="triangle"/div
#triangle {
width: 0;
height: 0;
border-bottom: 140px solid #fcf921;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
4
制作倒三角形：
与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：
#triangle {
width: 0;
height: 0;
border-top: 140px solid #20a3bf;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
5
制作左三角形：
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。
#triangle_left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}
制作菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。
#diamond {
width: 120px;
height: 120px;
background: #1eff00;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 310px;
}
制作梯形：
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。
#trapezium {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
制作平行四边形：
平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
#parallelogram {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}
星形：
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
#star {
width: 0;
height: 0;
margin: 50px 0;
color: #fc2e5a;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid #fc2e5a;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
六角星形：
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。
#star_six_points {
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #de34f7;
margin: 10px auto;
}
#star_six_points:after {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #de34f7;
margin: 30px 0 0 -50px;
}
六边形：
六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 10px auto;
}
#hexagon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #fc5e5e;
}
#hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #fc5e5e;
}
心形：
心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。
#heart {
position: relative;
}
#heart:before,#heart: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%;
}
#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%;
}
蛋形：
蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。
#egg {
width: 136px;
height: 190px;
background: #ffc000;
display: block;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
无穷符号：
无穷符号可以通过border属性和设置伪元素的角度来实现。
#infinity {
width: 220px;
height: 100px;
position: relative;
}
#infinity:before,#infinity:after {
content: "";
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
border: 20px solid #06c999;
-moz-border-radius: 50px 50px 0;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
消息提示框：
消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。
#comment_bubble {
width: 140px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#comment_bubble:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
步骤阅读
相关问答
Q1: 如何使用CSS3来绘制图形
!doctype html
html
head
meta charset="utf-8"
title无标题文档/title
style
*{
padding:0;
margin:0;
}
.wrap{
margin:30px;
}
.top,.bottom{
width:20px;
height:60px;
background-color:#666;
}
.top{
transform:skewX(15deg);
}
.bottom{
transform:skewX(-15deg);
}
/style
/head
body
div class="wrap"
div class="top"
/div
div class="bottom"
/div
/div
/body
/html
如果单纯用css3的话就是上面的代码了，用了斜切效果。除此之外还可以用图片、边框等方法。
Q2: 如何用css 绘制边长相等且有边框的六边形
首先，我的思路是六边形由一个长方形，两个三角形拼成。
css绘制有边框的三角形，比如你的六边形需要有白色的边框，红色的背景色，那么你的三角形则有白色的大三角形和红色的小三角形重叠在一起，组成一个白色边框的三角形。
之前用before ，after写完无边框的六边形，写有边框的六边形只好推翻这种方法重新写了。。。
我的项目是几个六边形，不规则的摆放，需要定位，给六边形添加hover效果。
最终，六边形画出来之后，PSD是1920的大小，算是高分辨率了，无法自适应不同分辨率的屏幕，还得用rem,我用的是hotcss，不需要自己计算px与rem之间的转换 实现了自适应，hotcss的使用详情请点击这个链接： 点击打开链接。
div class="nav"
div class="hex-wrap clearfix hex-wrap1"
div class="hex-border-left hex-border-left1 pull-left"
div class="hex-left"/div
/div
div class="fore fore1 pull-left"a href="javascript: void(0);"农业大数据/a/div
div class="hex-border-right hex-border-right1 pull-left"
div class="hex-right"/div
/div
/div
div class="hex-wrap clearfix hex-wrap2"
div class="hex-border-left hex-border-left2 pull-left"
div class="hex-left"/div
/div
div class="fore fore2 pull-left"a href="javascript: void(0);"物联监管/a/div
div class="hex-border-right hex-border-right2 pull-left"
div class="hex-right"/div
/div
/div
div class="hex-wrap clearfix hex-wrap3"
div class="hex-border-left hex-border-left3 pull-left"
div class="hex-left"/div
/div
div class="fore fore3 pull-left"a href="javascript: void(0);"畜牧/a/div
div class="hex-border-right hex-border-right3 pull-left"
div class="hex-right"/div
/div
/div
div class="hex-wrap clearfix hex-wrap4"
div class="hex-border-left hex-border-left4 pull-left"
div class="hex-left"/div
/div
div class="fore fore4 pull-left"a href="javascript: void(0);"质量溯源/a/div
div class="hex-border-right hex-border-right4 pull-left"
div class="hex-right"/div
/div
/div
div class="hex-wrap clearfix hex-wrap5"
div class="hex-border-left hex-border-left5 pull-left"
div class="hex-left"/div
/div
div class="fore fore5 pull-left"a href="javascript: void(0);"病虫害监测/a/div
div class="hex-border-right hex-border-right5 pull-left"
div class="hex-right"/div
/div
/div
div class="hex-wrap clearfix hex-wrap6"
div class="hex-border-left hex-border-left6 pull-left"
div class="hex-left"/div
/div
div class="fore fore6 pull-left"a href="javascript: void(0);"水产/a/div
div class="hex-border-right hex-border-right6 pull-left"
div class="hex-right"/div
/div
/div
div class="hex-wrap clearfix hex-wrap7"
div class="hex-border-left hex-border-left7 pull-left"
div class="hex-left"/div
/div
div class="fore fore7 pull-left"a href="javascript: void(0);"休闲旅游/a/div
div class="hex-border-right hex-border-right7 pull-left"
div class="hex-right"/div
/div
/div
div class="hex-wrap clearfix hex-wrap8"
div class="hex-border-left hex-border-left8 pull-left"
div class="hex-left"/div
/div
div class="fore fore8 pull-left"a href="javascript: void(0);"电子商务/a/div
div class="hex-border-right hex-border-right8 pull-left"
div class="hex-right"/div
/div
/div
/div
css代码：
[css] view plain copy print?
/* 8个导航的样式 */
.content .nav {
float: right;
width: 750px;
position: relative;
}
.hex-wrap {
position: absolute;
cursor: pointer;
}
.hex-wrap1 {
left: 170px;
top: 0px;
}
.hex-wrap2 {
left: 90px;
top: 148px;
}
.hex-wrap3 {
left: 0px;
top: 296px;
}
.hex-wrap4 {
left: 300px;
top: 94px;
}
.hex-wrap5 {
left: 215px;
top: 242px;
}
.hex-wrap6 {
left: 516px;
top: 27px;
}
.hex-wrap7 {
left: 435px;
top: 175px;
}
.hex-wrap8 {
left: 348px;
top: 323px;
}
.fore {
/*绘制一个宽80px,高136px 的长方形*/
width: 80px;
height: 136px;
text-align: center;
position: relative;
font-size: 24px;
border-top: 1px solid #dfe8f2;
border-bottom: 1px solid #dfe8f2;
}
.hex-border-left {
position: relative;
content: "";
width: 0;
height: 0;
border-top: 69px solid transparent;
border-bottom: 69px solid transparent;
}
.hex-left {
/*左边的三角形*/
content: "";
width: 0;
height: 0;
border-top: 68px solid transparent;
border-bottom: 68px solid transparent;
position: absolute;
left: 1px;
top: -68px;
}
.hex-border-right {
position: relative;
content: "";
width: 0;
height: 0;
border-top: 69px solid transparent;
border-bottom: 69px solid transparent;
}
.hex-right {
/*右边的三角形*/
content: "";
width: 0;
height: 0;
border-top: 68px solid transparent;
border-bottom: 68px solid transparent;
position: absolute;
right: 1px;
top: -68px;
}
.fore a {
color: #fff;
text-decoration: none;
cursor: pointer;
position: absolute;
white-space: nowrap;
width: 150px;
text-align: center;
display: block;
top: 50px;
left: -35px;
z-index: 99;
}
.hex-border-left {
border-right: 41px solid #fff;
}
.hex-border-right {
border-left: 41px solid #fff;
}
.fore1 {
background-color: #3498db;
}
.hex-border-left1 .hex-left {
border-right: 40px solid #3498db;
}
.hex-border-right1 .hex-right {
border-left: 40px solid #3498db;
}
.fore2 {
background-color: #1abc9c;
}
.hex-border-left2 .hex-left {
border-right: 40px solid #1abc9c;
}
.hex-border-right2 .hex-right {
border-left: 40px solid #1abc9c;
}
.fore3 {
background-color: #f1c40f;
}
.hex-border-left3 .hex-left {
border-right: 40px solid #f1c40f;
}
.hex-border-right3 .hex-right {
border-left: 40px solid #f1c40f;
}
.fore4 {
background-color: #9b59b6;
}
.hex-border-left4 .hex-left {
border-right: 40px solid #9b59b6;
}
.hex-border-right4 .hex-right {
border-left: 40px solid #9b59b6;
}
.fore5 {
background-color: #95a5a6;
}
.hex-border-left5 .hex-left {
border-right: 40px solid #95a5a6;
}
.hex-border-right5 .hex-right {
border-left: 40px solid #95a5a6;
}
.fore6 {
background-color: #e74c3c;
}
.hex-border-left6 .hex-left {
border-right: 40px solid #e74c3c;
}
.hex-border-right6 .hex-right {
border-left: 40px solid #e74c3c;
}
.fore7 {
background-color: #2ecc71;
}
.hex-border-left7 .hex-left {
border-right: 40px solid #2ecc71;
}
.hex-border-right7 .hex-right {
border-left: 40px solid #2ecc71;
}
.fore8 {
background-color: #e67e22;
}
.hex-border-left8 .hex-left {
border-right: 40px solid #e67e22;
}
.hex-border-right8 .hex-right {
border-left: 40px solid #e67e22;
}
.hex-wrap1:hover .fore1 {
background-color: #39B0FF;
border-top: 1px solid #39B0FF;
border-bottom: 1px solid #39B0FF;
}
.hex-wrap1:hover .hex-border-left1 {
border-right: 41px solid #39B0FF;
}
.hex-wrap1:hover .hex-border-right1 {
border-left: 41px solid #39B0FF;
}
.hex-wrap1:hover .hex-left {
border-right: 40px solid #39B0FF;
}
.hex-wrap1:hover .hex-right {
border-left: 40px solid #39B0FF;
}
Q3: 如何用CSS样式实现图中两条白线的效果？
使用渐变可以做到，linearGradient()
或者你是要canvas进行画图，还是要使用线性渐变
Q4: 用css画图涉及到哪些
如果你说的是CSS样式。那么CSS所有都涉及渲染部分。
如果你说的是像canvas那样画图的话，你需要了解paintWorklet。
Q5: 如何用 CSS 绘制按钮？
一般有三种方法：
olliButton标签直接使用CSS定义样式，优点是立体感、有按下状态，缺点是样式单一、各浏览器下显示效果不一致。
/lilia标签+背景图片+滑动门技术，优点是可实现多种视觉效果，缺点是采用滑动门技术会导致背景图片过大。
/lilia标签直接使用CSS3绘制，优点是在保证视觉效果的基础上大大减少了背景图片的使用，缺点是部分浏览器不兼容。/li/ol
