不静之心

总是乐于收藏和分享,有助于个人成长
  • 首页
  • 专业技术
    • 前端
      • javascript
      • 美工
    • 服务端
      • 设计模式
        • 创建型模式
        • 结构型模式
        • 行为型模式
      • Java
      • J2EE
      • Spring
      • Hibernate&Mybatis
      • PHP
      • Python
      • 工作流
    • 移动
    • 数据库
      • 大数据
    • 加解密
  • 专业工具
    • OS
    • 开源软件
    • Maven
    • WordPress
  • 我的收藏
    • 应用软件收藏
    • Android使用记录
    • 前端收藏
      • 移动开发框架插件收集
      • 优秀网站收集
      • CSS3效果插件
      • JS优秀插件收集
      • 图片图表图标插件
      • 前台美工和Bootstrap资源收集
      • 布局,表格,分页
    • 后端收藏
      • Linux软件收集
      • 使用Docker记录
      • Centos使用记录
      • 应用系统收藏
      • Java的特性
    • 经验收藏
    • 其他收藏
  • Linux命令
  • 现实生活
    • 梦里故乡
  • 相册
    • 我的摄影
    • 故乡
    • 生活
    • 人物
    • 风景
    • 其他
  • 经历
  • 首页
  • 专业技术
    • 前端
      • javascript
      • 美工
    • 服务端
      • 设计模式
        • 创建型模式
        • 结构型模式
        • 行为型模式
      • Java
      • J2EE
      • Spring
      • Hibernate&Mybatis
      • PHP
      • Python
      • 工作流
    • 移动
    • 数据库
      • 大数据
    • 加解密
  • 专业工具
    • OS
    • 开源软件
    • Maven
    • WordPress
  • 我的收藏
    • 应用软件收藏
    • Android使用记录
    • 前端收藏
      • 移动开发框架插件收集
      • 优秀网站收集
      • CSS3效果插件
      • JS优秀插件收集
      • 图片图表图标插件
      • 前台美工和Bootstrap资源收集
      • 布局,表格,分页
    • 后端收藏
      • Linux软件收集
      • 使用Docker记录
      • Centos使用记录
      • 应用系统收藏
      • Java的特性
    • 经验收藏
    • 其他收藏
  • Linux命令
  • 现实生活
    • 梦里故乡
  • 相册
    • 我的摄影
    • 故乡
    • 生活
    • 人物
    • 风景
    • 其他
  • 经历
首页 / 美工 / 使用梯形模拟一个六边形

使用梯形模拟一个六边形

使用梯形模拟一个六边形 2016年10月5日 不静之心 美工

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Test</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'>
  </head>
  <body>
    <div class="trapezoid" style="width: 220px; height: 200px; background: #000000">
      <div class="trapezoid-1" style="height:0;
            width:100px;
            border-bottom:100px solid #222;
            border-left:60px solid transparent;
            border-right:60px solid transparent;"></div>
      <div class="trapezoid-2" style="height:0;
            width:100px;
            border-top:100px solid #222;
            border-left:60px solid transparent;
            border-right:60px solid transparent; "></div>
 
      <div class="trapezoid-1" style="height:0;
            width:94px;
            border-bottom:97px solid #000000;
            border-left:60px solid transparent;
            border-right:60px solid transparent;
            position: relative;
            top: -197px;
            left: 3px;"></div>
      <div class="trapezoid-2" style="height:0;
            width:94px;
            border-top:97px solid #000000;
            border-left:60px solid transparent;
            border-right:60px solid transparent;
            position: relative;
            top: -197px;
            left: 3px;"></div>
    </div>
  </body>
</html>

 

后一篇
前一篇

发表评论 取消回复

电子邮件地址不会被公开。

后一篇
前一篇

  •      做自己喜欢做的,跟家人同等重要

  • 访问信息

    • 2,491
    • 2,876
    • 35,014
    • 127,526
    • 5,556,534
    • 1,925
    • 2024年3月5日
  • 功能

    • 登录
    • 文章RSS
    • 评论RSS
    • WordPress.org
  • 近期评论

    • 匿名发表在《我们农村吃过的野果》
    • 请看小说阅读网发表在《使用CSS + svg 实现中间镂空的图片遮罩效果,css遮罩》
    • 嘀嗒小说网,嘀嗒小说阅读网发表在《BI 开源工具介绍》
    • 瓜子小说网发表在《HTML 标签及在实际开发中的应用》
    • 爱趣发表在《WordPress固定链接设置技巧》
    • 全天电影网发表在《WordPress固定链接设置技巧》
    • java面试题收集 – 不静之心发表在《58到家数据库30条军规解读》
    • 不静之心发表在《CentOS6.4邮件配置三: 花生壳 + 自定义DNS解析 + Dovecot 配置收外网信件》
    • Evan发表在《CentOS6.4邮件配置三: 花生壳 + 自定义DNS解析 + Dovecot 配置收外网信件》
    • 不静之心发表在《spring+mybatis+jta/druid+atomikos 两种方式》

粤ICP备16057205号-1 , 潘永郑[ panyongzheng@163.com ]