如何用 CSS 绘制各种形状

制作圆形：

成都创新互联公司专业为企业提供镇海网站建设、镇海做网站、镇海网站设计、镇海网站制作等企业网站建设、网页设计与制作、镇海企业网站模板建站服务，10余年镇海做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

要使用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;

}

步骤阅读

如何使用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的话就是上面的代码了，用了斜切效果。除此之外还可以用图片、边框等方法。

如何用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;  

}

如何用CSS样式实现图中两条白线的效果？

使用渐变可以做到，linearGradient()

或者你是要canvas进行画图，还是要使用线性渐变

用css画图涉及到哪些

如果你说的是CSS样式。那么CSS所有都涉及渲染部分。

如果你说的是像canvas那样画图的话，你需要了解paintWorklet。

如何用 CSS 绘制按钮？

一般有三种方法：

olliButton标签直接使用CSS定义样式，优点是立体感、有按下状态，缺点是样式单一、各浏览器下显示效果不一致。

/lilia标签+背景图片+滑动门技术，优点是可实现多种视觉效果，缺点是采用滑动门技术会导致背景图片过大。

/lilia标签直接使用CSS3绘制，优点是在保证视觉效果的基础上大大减少了背景图片的使用，缺点是部分浏览器不兼容。/li/ol

网页标题：css样式画图,css画各种图形
本文网址：http://pwwzsj.com/article/dschisi.html