随着技术的发展，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. 登陆界面背景动画的css样式

    为了达到更好的用户体验,登陆界面需要设计多张背景图进行动态切换 <!doctype html> <html lang="en"> <head> ...

  2. SQL Cookbook—数字、日期

    1.计算不包含最大值和最小值的均值2.把字母数字串转换为数值3.更改累计和中的值–显示存款或取款后的值4.加减日.月.年5.计算两个日期之间的天数6.确定两个日期之间的工作日数目表EMP中,计算BLA ...

  3. The “SignFile” task was not given a value for the required parameter “CertificateThumbprint”的一个简单的解决方法

    这个只是其中一种解决方法,而且不是万能的 1. 由提示内容可以看出,这个一个 sign(认证)的问题, 在出现这个问题的项目上,鼠标右键,选择properties,然后选择signing. 2. 选择 ...

  4. HDU 5691 ——Sitting in Line——————【状压动规】

    Sitting in Line Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Other ...

  5. UOJ #138. 【UER #3】开学前的涂鸦

    Description 红包是一个有艺术细胞的男孩子. 红包由于NOI惨挂心情不好,暑假作业又多,于是他开始在作业本上涂鸦. 一开始,他在纸上画了一棵 n 个节点的树.但是他觉得这样的画太简单了,体现 ...

  6. js生成6位随机码

    js生成6位随机数字: let chars = '0123456789'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ let maxPos = chars.len ...

  7. MyBatis 知识点梳理

    简单地梳理下MyBatis相关的知识点,主要想让自己重新捡起以前学的框架,如果能给广大程序猿朋友有所帮助那就更好了.有疏漏的地方也欢迎大家评论指出.闲言少叙,进入正题....... MyBatis知识 ...

  8. [javaEE] 三层架构案例-用户模块（一）

    用户注册登录注销 Servlet+JSP+javaBean+dom4j 分层结构: com.tsh.web com.tsh.service com.tsh.dao com.tsh.domain com ...

  9. redis(8)集群简介

    一.集群 互联网每天都会产生大量的数据,单实例已经不能满足需求.但是如果依赖于硬件成本的提升,那就不是所有人能够负担的起的. 集群这个时候出现,一定程度上解决了这个问题.它通过互联网,将多个单实例连接 ...

  10. 关于利用MQ实现分布式事务的想法【转】

    转自:https://www.jianshu.com/p/bafb09954f18 假设:消息服务不丢消息 场景 服务A 服务B 服务C 消息服务Q 伪代码 服务A中 transaction{ A本地 ...