css如何制作八边形
随着技术的发展，css也越发强大，css可以制作很多有趣的图形，让我们一起来看一下如何使用css制作一个八边形吧。
方法/步骤
1新建一个html文件。如图：
在html文件上创建一个div标签，然后给这个标签添加一个id，后面的样式设置就是对这个id进行设置。
代码： <div id="octagon"></div>
设置id样式，创建一个矩形。id的样式主要有宽、高、背景色及矩形的位置。如图：
代码：
<style type="text/css" >
#octagon{
width: 250px;
height: 120px;
margin: 150px auto;
position: relative;
}
</style>
保存html代码后使用浏览器查看，即可看到矩形效果。如图：
使用伪类before创建一个梯形，然后使用绝对定位把这个梯形放在矩形的上面。。如图：
样式代码：
#octagon:before{
content: "";
position: absolute;
top:-75px;
width: 100px;
border-color:transparent transparent red transparent;
border-width:0 75px 75px 75px ;
border-style: solid;
}
保存html文件后使用浏览器查看，即可看到一个六边形效果。如图：
回到html代码页面，使用伪类after给这个矩形再添加一个梯形，使用绝对定位调整好梯形的位置。如图：
保存html文件使用浏览器打开，即可看到一个八边形效果。如图：
所有代码。可以直接复制所有代码到html文件，保存好后运行即可看到效果。
所有代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>八边形</title>
<style type="text/css" >
#octagon{
width: 250px;
height: 120px;
margin: 150px auto;
position: relative;
}
#octagon:before{
content: "";
position: absolute;
top:-75px;
width: 100px;
border-color:transparent transparent red transparent;
border-width:0 75px 75px 75px ;
border-style: solid;
}
#octagon:after{
content: "";
position: absolute;
top:120px;
width: 100px;
border-color:red transparent transparent transparent;
border-width: 75px 75px 0 75px ;
border-style: solid;
}
</style>
</head>
<body>
<div id="octagon"></div>
</body>
</html>
文章来源：百度
css如何制作八边形的更多相关文章
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- css+div制作圆角矩形的四种方法
圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...
- css之制作三角形
箭头向上三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- #3使用html+css+js制作网页 番外篇 制作接收php
使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...
- #3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...
随机推荐
- C# GridView 导出Excel表
出错1:类型“GridView”的控件“GridView1”必须放在具有 runat=server 的窗体标记内解决方案:在后台文件中重载VerifyRenderingInServerForm方法,如 ...
- 彻底解决matplotlib中文乱码问题(转)
彻底解决matplotlib中文乱码问题 1.环境查看a.系统版本查看[hadoop@p168 ~]$ cat /etc/redhat-releaseCentOS Linux release 7.2. ...
- Git学习系列之Git 的优势有哪些？
Git 的优势主要有: 1.更方便的 Merge 分布式管理必然导致大量的 Branch 和 Merge 操作.因此分布式版本控制系统都特别注意这方面.在传统的 CVS 里面制作 Branch 和 M ...
- 转 shell中$(( )) 与 $( ) 还有${ }的区别
原文 http://blog.zol.com.cn/2322/article_2321763.html $( ) 与 ` ` (反引号)在 bash shell 中,$( ) 与 ` ` (反引号) ...
- 如何下载Red Hat Enterprise Linux系统
关于如何下载Red Hat Enterprise Linux系统? 这是一个既简单,又复杂的问题.简单是因为我以为她很简单,复杂是因为下载的过程有点复杂的. 相信去Oracle官网下载过东西的同学对下 ...
- PHP的file_get_contents()方法，将整个文件读入字符串中
<?php $post_data = file_get_contents("e:\\1.txt"); echo $post_data; ?> 更多信息看这里:http: ...
- hdu 1460 完数
注意:num1和num2的大小未知,需比较! 有两种方法: 法一:素数打印+素数分解(求因数和公式) #include<iostream> #include<cstring> ...
- solr6.6教程-基础环境搭建(一)
目前网上关于solr6.+的安装教程很少,有些6.0之前的教程在应用到6.+的版本中出现很多的问题,所以特别整理出来这一片文章,希望能给各位码农一些帮助! 很少写些文章,如有不对的地方,还希望多多指导 ...
- 使用Charles为Android设备抓取https请求的包
之前开发的Android APP使用的都是http请求,之后改成了https,就出现了以下情况,无法正常读取抓取的内容 找了好多资料说法大概差不多,照着弄,结果出现如下情况,后来发现这种情况其实是手机 ...
- CentOS7部署.Net Core2.0站点(中)
继续上篇的内容,本篇来学习下nginx的配置和守护进程supervisor的使用. 一.Nginx安装及配置 (1)安装nginx sudo yum install epel-release #添加源 ...