随着技术的发展，css也越发强大，css可以制作很多有趣的图形，让我们一起来看一下如何使用css制作一个八边形吧。

 

方法/步骤

 
  1.  

    1新建一个html文件。如图：

  2.  

    在html文件上创建一个div标签，然后给这个标签添加一个id，后面的样式设置就是对这个id进行设置。

    代码： <div id="octagon"></div>

  3.  

    设置id样式，创建一个矩形。id的样式主要有宽、高、背景色及矩形的位置。如图：

    代码：

    <style type="text/css" >

    #octagon{

    width: 250px;

    height: 120px;

    margin: 150px auto;

    position: relative;

    }

    </style>

  4.  

    保存html代码后使用浏览器查看，即可看到矩形效果。如图：

  5.  

    使用伪类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;

    }

  6.  

    保存html文件后使用浏览器查看，即可看到一个六边形效果。如图：

  7.  

    回到html代码页面，使用伪类after给这个矩形再添加一个梯形，使用绝对定位调整好梯形的位置。如图：

  8.  

    保存html文件使用浏览器打开，即可看到一个八边形效果。如图：

  9.  

    所有代码。可以直接复制所有代码到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如何制作八边形的更多相关文章

  1. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  2. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  3. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  4. css之制作三角形

    箭头向上三角形 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px ...

  5. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  6. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  7. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  8. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  9. #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 ...

随机推荐

  1. 用vue建新项目的过程---在工作中

    1.git clone 项目地址 2.如果没装vue-cli,就先装下vue-cli  (如果报错可能是没按管理员身份安装) 3.vue init webpack 项目名 4.安装项目依赖 npm i ...

  2. 我的Python升级打怪之路【六】：面向对象（二）

    面向对象的一些相关知识点 一.isinstance(obj,cls) 检查实例obj是否是类cls的对象 class Foo(object): pass obj = Foo() isinstance( ...

  3. 《图解http协议》之HTTPs学习笔记

    对于IP协议,并不陌生.TP协议是TCP/IP协议簇中的核心协议,也是TCP/IP的载体.所有的TCP,UDP,ICMP及IGMP数据都以IP数据报格式传输.IP提供不可靠的,无连接的数据传送服务.I ...

  4. 进入与退出anconda虚拟环境

    # 进入虚拟环境,使用 # # $ conda activate spider-venv # # 退出虚拟环境,使用 # # $ conda deactivate

  5. 架构实战项目心得（六）：后台服务nosql数据库mongodb

    一.架构介绍        mongodb有几种部署方式,这里采用的是副本集架构(Replica Set).        为了防止单点故障就需要引副本(Replication),当发生硬件故障或者其 ...

  6. 项目开发-->基础功能汇总

    祭奠曾经逝去的青春…… 1.基础功能汇总-->身份认证及用户登录模块 2.基础功能汇总-->一键登录功能汇总 3.堆和栈 4.变量

  7. C# 页面抽奖实例 asp.net

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  8. 微信小程序开发框架整理

    目前除了原生的微信小程序开发外,各大厂商陆续造了自己的开发框架,现整理如下: WePY 腾讯官方开源的小程序组件化开发框架,目前有15K+Star ,一直在更新着,社区活跃,掉坑能快速的找到方法爬出来 ...

  9. 初进JAVA职场面试小技巧:一个老学长的吐血之作!

    看着一批批小白的遭遇,有些无奈,又跟我年轻时有些类似.今天正好有点时间,给你几个建议. 1.在结业之前一定要把自己参与过的项目仔细审视一下,一点要特别熟悉项目的流程功能,另外也要重视自己做过的模块,看 ...

  10. Bazaar 版本控制工具

    Bazaar是一个分布式的版本控制系统,它发布在GPL许可协议之下,并可用于Windows.GNU/Linux.UNIX以及Mac OS系统.Bazaar由Canonical公司赞助,目前已服务于Sa ...