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 ...
随机推荐
- 【CSS】 布局之多列等高
这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...
- p2p的UDP打洞原理
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- Atom编辑器汉化
Atom编辑器汉化成中文版 其他分享 7个月前 (04-04) 426浏览 0评论 Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器.小松今天看到了这个编辑器,而且感觉不错,推荐一下 ...
- Java动态代理的理解
代码内容: https://github.com/cjy513203427/Java_Advanced_Knowledge/tree/master/src/com/advance/dynamic_pr ...
- bzoj 3874: [Ahoi2014&Jsoi2014]宅男计划
Description 外卖店一共有N种食物,分别有1到N编号.第i种食物有固定的价钱Pi和保质期Si.第i种食物会在Si天后过期.JYY是不会吃过期食物的. 比如JYY如果今天点了一份保质期为1天的 ...
- UOJ #138. 【UER #3】开学前的涂鸦
Description 红包是一个有艺术细胞的男孩子. 红包由于NOI惨挂心情不好,暑假作业又多,于是他开始在作业本上涂鸦. 一开始,他在纸上画了一棵 n 个节点的树.但是他觉得这样的画太简单了,体现 ...
- isnull函数
isnull是判断一个字段是否为空值,返回一个特定的值 列: isnull(a,0) 如果a字段有空值返回0 没有空值就返回a的本身 isnull(a,1)=2 字段a有空值返回1,判断isnull ...
- 网站部署中遇到的问题-未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项
问题描述: 运行站点抛出错误:未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项 原因: 应用程序池没有启用32位程序. 解决方法: 找到站点对应的应用程序池,设置启用32 ...
- SSRS使用MySql作为数据源遇到的问题。
因为工作需求,SSRS需要取到MySql数据源,还好有了ODBC. 谷歌了很多,都是不完整的Solution,放上完整版的供大家评价参考. 下面是StepByStep. 问题1.使用ODBC数据源,填 ...
- IntelliJ IDEA 安装配置
之前一直用的eclipse,以前公司的老大推荐过用这个,但是由于项目都比较赶,没及时学习. 后面这个公司的同时都用的idea,所以就换了 其实并没有那么难主要是刚刚切换时候快捷键不熟悉,打包什么的,有 ...