搜索
您的当前位置:首页CSS绘制五角星_CSS/HTML

CSS绘制五角星_CSS/HTML

时间:2023-11-29 来源:乐玩宠

1 六角形 代码如下:#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative;}#star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px;}

2 五角星 代码如下:#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);}#star-five:before { border-bottom: 80px solid red; 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);}#star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: '';}

3 五边形 代码如下:#pentagon { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent;}#pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent red;}

4 hexagon 代码如下:#hexagon { width: 100px; height: 55px; background: red; position: relative;}#hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red;}#hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red;}

5 多边形 代码如下:#octagon { width: 100px; height: 100px; background: red; position: relative;}#octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0;}#octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0;}

6 心形 代码如下:#heart { position: relative; width: 100px; height: 90px;}#heart:before,#heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -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%;}

小编还为您整理了以下内容,可能对您也有帮助:

css怎么制作五角星

五角星

复制代码 代码如下:


#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right:  100px solid transparent;
border-bottom: 70px  solid red;
border-left:   100px solid transparent;
-moz-transform:    rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform:     rotate(35deg);
-o-transform:      rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
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);

}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform:    rotate(-70deg);
-ms-transform:     rotate(-70deg);
-o-transform:      rotate(-70deg);
content: '';
}

css怎么制作五角星

五角星

复制代码 代码如下:


#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right:  100px solid transparent;
border-bottom: 70px  solid red;
border-left:   100px solid transparent;
-moz-transform:    rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform:     rotate(35deg);
-o-transform:      rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
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);

}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform:    rotate(-70deg);
-ms-transform:     rotate(-70deg);
-o-transform:      rotate(-70deg);
content: '';
}

CSS和html如何实现这个效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝购买</title>
<style>
  .taobao{width:224px;height:224px; position:relative; z-index:0; overflow:hidden; cursor:pointer}
  .taobao.img{display:block; position:relative; z-index:0;}
  .taobao a{display:none;height:20px; text-align:center; background:red; color:#fff; text-decoration:none; font-weight:bold; font-family:"新宋体"; font-size:16px; line-height:20px; margin:auto 15px; margin-top:-102px; position:relative; z-index:1000;}
  .zhezao{opacity:0.2; position:relative;z-index:100;height:100%;width:100%; margin-top:-100%; display:none; background:#333}
  .taobao:hover a, .taobao:hover .zhezao{display:block;}
</style>
</head>
<body>
  <div class="taobao">
     <img src="1.png">
     <div class="zhezao"></div><a href="#" target="_blank">去淘宝购买</a>
  </div>
</body>
</html>

随便做了个演示,你根据你自己的要求完善一下!

例外,由于时间紧张,在ie下运行正常,其他浏览器,你在测试修改下!

下面是效果图:

CSS和html如何实现这个效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝购买</title>
<style>
  .taobao{width:224px;height:224px; position:relative; z-index:0; overflow:hidden; cursor:pointer}
  .taobao.img{display:block; position:relative; z-index:0;}
  .taobao a{display:none;height:20px; text-align:center; background:red; color:#fff; text-decoration:none; font-weight:bold; font-family:"新宋体"; font-size:16px; line-height:20px; margin:auto 15px; margin-top:-102px; position:relative; z-index:1000;}
  .zhezao{opacity:0.2; position:relative;z-index:100;height:100%;width:100%; margin-top:-100%; display:none; background:#333}
  .taobao:hover a, .taobao:hover .zhezao{display:block;}
</style>
</head>
<body>
  <div class="taobao">
     <img src="1.png">
     <div class="zhezao"></div><a href="#" target="_blank">去淘宝购买</a>
  </div>
</body>
</html>

随便做了个演示,你根据你自己的要求完善一下!

例外,由于时间紧张,在ie下运行正常,其他浏览器,你在测试修改下!

下面是效果图:

如何用html5写特殊符号五角星

这篇文章主要介绍了关于HTML5 canvas绘制五角星的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

<canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制五角星方法,感兴趣的小伙伴们可以参考一下

<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。

<canvas></canvas>只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>元素上绘图主要有三步:

1.获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象进行绘图。

通过对五角星分析,我们可以确定各个顶点坐标的规律,这里需要注意的一点是:在canvas中,Y轴的方向是向下的。

相应代码如下:

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); //设置是个顶点的坐标,根据顶点制定路径 for (var i = 0; i < 5; i++) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200, -Math.sin((54+i*72)/180*Math.PI)*80+200); } context.closePath(); //设置边框样式以及填充颜色 context.lineWidth="3"; context.fillStyle = "#F6F152"; context.strokeStyle = "#F5270B"; context.fill(); context.stroke();

最后效果:

如何用html5写特殊符号五角星

这篇文章主要介绍了关于HTML5 canvas绘制五角星的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

<canvas></canvas>是HTML5中新增的标签,用于绘制图形,这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制五角星方法,感兴趣的小伙伴们可以参考一下

<canvas></canvas>是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。

<canvas></canvas>只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>元素上绘图主要有三步:

1.获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象进行绘图。

通过对五角星分析,我们可以确定各个顶点坐标的规律,这里需要注意的一点是:在canvas中,Y轴的方向是向下的。

相应代码如下:

var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.beginPath(); //设置是个顶点的坐标,根据顶点制定路径 for (var i = 0; i < 5; i++) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200, -Math.sin((54+i*72)/180*Math.PI)*80+200); } context.closePath(); //设置边框样式以及填充颜色 context.lineWidth="3"; context.fillStyle = "#F6F152"; context.strokeStyle = "#F5270B"; context.fill(); context.stroke();

最后效果:

我想要用css+div实现一个网页的欢迎界面 类似国旗的五角星大星星是logo其他4个小星星是连接子页面

<div style="position:relative; background-image:url(你的大五角星图片地址); width:大五角星的宽度; height:大五角星的高度;">

<img src="第一个小五角星地址" style=" position:absolute; left:20px; top:20px;"/>

<img src="第二个小五角星地址" style=" position:absolute; left:30px; top:30px;"/>

<img src="第三个小五角星地址" style=" position:absolute; left:40px; top:40px;"/>

<img src="第四个小五角星地址" style=" position:absolute; left:50px; top:50px;"/>

</div>

把上面的代码复制到大五角星要放置的位置,那些中文是要你自己改的,小五角星可以自己在dw里面拖动的,大五角星不要拖动哦。

css如何设置htmlcss如何设置圆角边框

CSS是如何嵌入HTML的?

CSS通过内联、外联等样式嵌入HTML。

1.使用样式表的处理指令语句。

在HTML文档的开头写一个关于样式表的指令处理语句。

复制代码

代码如下:

href=

但是,只有以xml语法格式编写的html文档才支持该指令。大部分浏览器只有保存为xhtml或xml格式才有效,JS无法处理这种CSS,所以不推荐使用。

2.使用@import命令

在样式元素之间使用@import命令导入外部css文件。

复制代码

代码如下:

@导入URL(mystyle.css

-

任何@import规则必须出现在所有规则之前。参数是css文件的URL地址。在css文件中,还可以使用@import指令导入另一个css文件。

3.使用link元素

复制代码

代码如下:

text/CSS

这也是最常用的方式。

4.使用HTTP消息头链接到样式表。

您可以通过使用HTTP消息头中的link字段来链接外部样式表。

复制代码

代码如下:

链接:rel=样式表;

//相当于

注:在使用color设置文本字体的颜色时,需要使用合理的背景颜色和文本颜色搭配,这样可以提高文本的可读性。

语法

CSS语法:color:value;

JavaScript语法:

object.style.color=#FF0000

可能使用的属性值color_name:规定颜色值为颜色名称的颜色(比如red)。

hex_number:规定颜色值为十六进制值的颜色(比如#ff0000)。

rgb_number:规定颜色值为rgb代码的颜色(比如rgb(255,0,0))。

html线条怎么设置?

1.

打开编辑器,新建一个HTML文档,并且编写基本框架。

2.

新建一个CSS文档,并且关联刚刚创建的HTML文档。

3.

新建一个p标签,可以看到这个p默认是没有边框的。

4.

border:1pxsolidred;这是我们设置边框的常用格式。

5.

我们可以把边框改为点状式的。

6.

也可以修改为虚线形状的。

html怎么设置页面和页面的链接?

打开记事本等进行编辑,可以直接使用记事本或者使用HTML编辑器等

一个基本的HTML是通过各种标签以及其属性和属性值来实现的

HTML添加链接也是通过标签和属性来实现的。通过“a“标签和”href”属性添加

将记事本成后打开

另存为,文件名以“.html”后缀。

打开HTMl网页显示一个链接,点击即可链接到相应页面

css规则使用步骤?

css的用法:

外部式:

(1)用法:当要在站点上所有或部分网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页外观的一致性。如果人们决定更改样式,只需在外部样式表中修改一次,而该更改会反映到所有与该样式表相链接的网页上。

(2)举例:通常外部样式表以.css做为文件扩展名,例如Mystyles.css。然后在需要此样式的页面中将其链接进来。

内嵌式:

(1)用法:当人们只是要定义当前网页的样式,可使用嵌入的样式表。嵌入的样式表是一种级联样式表,“嵌”在网页的标记符内。嵌入的样式表中的样式只能在同一网页上使用。

(2)举例:在MicrosoftFrontPage2000中,某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用“边框与阴影”命令(在“格式”菜单上)在普通段落周围应用框,FrontPage会写下格式设置信息,作为段落标记符的内嵌样式属性。

行内样式:

行内样式就是直接把CSS代码添加到HTML的标记中,即作为HTML标记的属性标记存在。通过这种方法,可以很简单地对某个元素单独定义样式。

乐玩宠还为您提供以下相关内容希望对您有帮助:

我想要用css+div实现一个网页的欢迎界面 类似国旗的五角星大星星是logo...

&lt;div style="position:relative; background-image:url(你的大五角星图片地址); width:大五角星的宽度; height:大五角星的高度;"&gt; &lt;img src="第一个小五角星地址" style=" position:absolute; left:20px; top:20px;"...

如何用html5写特殊符号五角星

function createFiveStar(context){ var dx = 0;//画出来的五角星x偏移位置 var dy = 100;//画出来的五角星y偏移位置 var s = 50;//画出来的五角星的大小 context.beginPath();//开始路径绘制 var x = Math.sin...

html css这种效果怎么做?

需要引入jQuery,HTML代码如下:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; ul,li,p { margin: 0;padding: 0;list-style: none;} .time { width: 10...

如何利用CSS实现各种几何图形形状效果_html/css_WEB-ITnose

一.实现正方形:蚂蚁部落.mytest{ width:100px; height:100px; background-color:green;} 二.实现矩形:蚂蚁部落.mytest{ width:150px; height:100px; background-color:green;} 三.实现圆形:IE8和IE8以下的浏览器...

css如何设置htmlcss如何设置圆角边框

CSS通过内联、外联等样式嵌入HTML。1.使用样式表的处理指令语句。在HTML文档的开头写一个关于样式表的指令处理语句。复制代码 代码如下:href= 但是,只有以xml语法格式编写的html文档才支持该指令。大部分浏览器只有保存为xhtml...

CSS和html如何实现这个效果

doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;淘宝购买&lt;/title&gt;&lt;style&gt; .taobao{width:224px;height:224px; position:relative; z-index:0; overflow:hidden; cursor:pointer} .taobao.img{display:...

几种关于html和css的使用方法

HTML使用方法篇一:颜色代码 如果你想使用某种颜色,取得它的颜色值即可。比如,您想改变某些文字的颜色,您可以使用下面的代码:&lt;font color=#ffc060 size=2&gt;改变#符号后的代码即可改变颜色&lt;/font&gt; 二:文字加粗 倾斜的...

用css+html 做出如图效果

CSS样式如下:&lt;style type="text/css"&gt; div {width:600px; height:90px; background:url(图片文件夹/图片文件名)} ul {width:375px; margin:15px auto; padding:0; list-style:none; font:bold 16px/3 simsun}...

用html语言和css做成这样

DOCTYPE html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;test&lt;/title&gt; &lt;style type="text/css"&gt; *{margin:0;padding:0;} body{background: #C8ED...

网页上怎样表示动态用星星表示评分 的html+css,支持半颗星

你可以到这个地方去看一下 http://www.zhangxinxu.com/study/201308/hello-star.html 半星可以将图片换成灰色星星和半星然后多加5个A标签和label

Top
8.738531s