想要构造六芒星图案首先要知道如何构造三角形

构造三角形

思路：

使盒子的内容与宽度均为0，使用边框border来设置；

给各边分别设置样式；

隐藏三边，保留一边，改变border-width来改变三角形的形状。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>三角形构造</title><style>div{border: 200px solid #663399;width:0;height:0;border-color: rgba(0, 0, 255, 0) rgba(152, 251, 152, 0) red rgba(255, 255, 0, 0);}</style>
</head>
<body><div> </div>
</body>
</html>

效果：

注意：如构想改变三角形形状，要使用border-width来实现！

构造六芒星图案

思路：

构造一个圆形；

构造两个等边三角形；

使等边三角形定位在圆中央。

分析：

1.如何构造圆形

设置盒子内部高度与宽度相同，边框类型为圆角。

详见代码：container部分

2.如何构造等边三角形

在原构造三角形的基础上控制border-width。

详见代码：left、right部分

以此三角形为例：

由数学关系知等边三角形高与底之比约为1.73：2，则我们可设置border-width上下为100px,左右为173px。简写：border-width：100px 173px.

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>构造六芒星</title>
</head>
<style>.container{width: 230px;height: 230px;background-color: blanchedalmond;border: 2px solid blanchedalmond;border-radius: 50%;position: relative;}.left{border-style: solid;border-width: 100px 173px;border-color: rgba(137, 43, 226, 0) rgb(169, 169, 169)  rgba(34, 139, 34, 0) rgba(65, 105, 225, 0);position: absolute;right: 60px;top: 15px;}.right{border-style: solid;border-width: 100px 173px;border-color: rgba(137, 43, 226, 0) rgba(169, 169, 169, 0)  rgba(137, 43, 336, 0) rgb(169, 169, 169);position: absolute;right: -175px;top: 15px;}
</style>
<body><div class="container"><div class="left"></div><div class="right"></div></div></body>
</html>

效果：

当然如果你不满足于现状，也可采用伪元素选择器实现更高端操作！

思路：

给左右盒子加伪元素选择器，使其产生边框！

提醒：但别忘了定位哦！

增加代码：

 .left::after{content: "";border-style: solid;border-width: 80px 138px;border-color: rgba(137, 43, 226, 0) rgb(17, 168, 3)  rgba(34, 139, 34, 0) rgba(65, 105, 225, 0);position: absolute;right: -160px;top: -80px;z-index: 1;/*使其不被遮挡*/.right::after{content: "";border-style: solid;border-width: 80px 138px;border-color: rgba(137, 43, 226, 0) rgba(169, 169, 169, 0)  rgba(137, 43, 336, 0) rgb(17, 168, 3);position: absolute;right: -115px;top: -80px;

总体效果：

欢迎补充、建议！

CSS构造六芒星图案相关推荐

html网页制作图案,巧用CSS滤镜做图案文字-网页设计,HTML/CSS
请先看看以下演示中的图案文字.这可不是图片效果,而是用css滤镜中的chroma() 语句做成的文本文字,其中文本的内容和图案都可以自由设定. 先介绍一下这个神奇的滤镜:chroma() 滤镜. 语法 ...
如何利用CSS制作星星图案
CSS是网页设计师和前端人员需要了解和学习的一门语言,特别是现在很多网页使用扁平化设计,这类设计风格大部分布局.交互动画甚至是图标都会使用高级点的CSS3技能,所以我们应该熟练掌握CSS这门样式语言. ...
用css绘制六芒星,turtle库应用实例2-六芒星的绘制
‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬ 描述 ...
【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1
文章目录纯html+css构造网页音乐播放器 html代码: CSS代码: 纯html+css构造网页音乐播放器此处参照各大音乐播放器这个页面使用了1天的时间进行构造,由于对各语法还不是很熟悉, ...
css复杂的背景图案（网格、波点、棋盘）
使用css实现以下图案 1.网格 <div class="box box2"></div> <style>.box {width: 200px; ...
30段超实用CSS代码
上周,研发频道发表了一篇" Web开发者不容错过的20段CSS代码",大家一致觉得很实用.该文是笔者对后30个的翻译,希望对大家有帮助. 1.花式连字符(&) 这个类应该在 ...
Web开发者的福利 30段超实用CSS代码
上周,研发频道发表了一篇" Web开发者不容错过的20段CSS代码",大家一致觉得很实用.该文是笔者对后30个的翻译,希望对大家有帮助. 1.花式连字符(&) 这个类应该在 ...
常用css整理2 转自csdn
1.花式连字符(&) 这个类应该在span元素里使用,并且里面包括&字符.它使用经典的serif字体和斜体来增强&符号. 1 2 3 4 5 .amp { font-f ...
Web开发者的福利 30段超实用CSS代码笔记
1.花式连字符(&) 这个类应该在span元素里使用,并且里面包括&字符.它使用经典的serif字体和斜体来增强&符号. 1 2 3 4 5 .amp { font-f ...

CSS构造六芒星图案

构造三角形

思路：

代码：

效果：

构造六芒星图案

思路：

分析：

1.如何构造圆形

2.如何构造等边三角形

代码：

效果：

思路：

增加代码：

总体效果：

CSS构造六芒星图案相关推荐

最新文章

热门文章