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>
文章来源:百度
最新文章
- R自动数据收集第一章概述——《List of World Heritage in Danger》
- checkbox --jquery
- 如果一个游戏上面加一个透明层,js能不能实现 点击透明层的任意点 而正常玩游戏
- vmware, failed to lock the file
- Windows Phone,向localdatabase中插入时间数据出现不能转换的错误
- Java Topology Suite (JTS)与空间数据模型
- java 导出excel(读数据库案例)
- 在chrome下鼠标拖动层变文本形状的问题
- awk的递归
- SQL Server 检测到基于一致性的逻辑 I/O 错误 pageid 不正确
- Django-model基础
- java中多态的实现机制
- 生存分析(survival analysis)
- Access 2010 应用基础 单元三:SQL查询
- js数组知识点总结及经典笔试题
- Learn2Rank
- curl 远程下载图片
- Keras网络层之“关于Keras的层(Layer)”
- wpa_supplicant移植与使用(转)
- JUC包下Semaphore学习笔记
热门文章
- C# GridView 导出Excel表
- Eclipse for J2EE+tomcat配置上的一些问题
- JavaScript HTML DOM学习记录
- 【随笔】nginx下的301跳转,两个域名指向同一个服务器ip
- [转]nopCommerce 3.9 版本发行
- SSIS教程:创建简单的ETL包 -- 2. 添加循环(Adding Looping)
- HTTP 错误 404.11 - Not Found 请求筛选模块被配置为拒绝包含双重转义序列的请求。
- 006.ASP.NET MVC ActionResults说明
- mac安装rz,sz文件操作指令包
- 流畅的python和cookbook学习笔记(六)