当前位置:首页 > 前端技术 > CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

2022年08月05日 14:48:12前端技术6

  《CSS 魔法系列》继续给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制五角星、六角形、五边形、六边形、心形等等。

  我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。

您可能感兴趣的相关文章

 

Star (6-points)

 
 
 
#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;
}

  

Star (5-points)

 
 
#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: '';
}

  

Pentagon

 

 
#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;
}

  

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;
}

  

Octagon

 
 
#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;
}

  

Heart

 
 
#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 魔法系列:纯 CSS 绘制图形(心形、六边形)

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:梦想天空(山边小溪)
来源链接:https://www.cnblogs.com/lhb25/p/css-and-css3-shapes-a.html

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17720.html

标签: css
分享给朋友:

“CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)” 的相关文章

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

什么是HTML和CSS

什么是HTML和CSS? HTML的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

CSS文字样式

notice:文字样式会被继承 一、常用的文字样式 1、设置文字的颜色    color:red; 2、设置文字的大小  font-size:30px; 3、设置文字的粗细,bold为加粗...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。