css六边形边框

第一步、分解图形

拆分成一个长方形和两个正方形

  1. 三角形是正方形的一半
  2. 用伪元素实现一个正方形
  3. 旋转45度(transform:rotate(45deg))

等腰直角三角形是特殊的等腰三角形，它的特点是：

（1）两底角等于45°。

（2）两腰相等。

（3）等腰直角三角形三边比例为1:1:√2

所以最终的代码是这样的

web前端css实现六边形效果的更多相关文章

  1. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  2. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  3. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  4. web前端—css面试题

    1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...

  5. Bootstrap 简介(Web前端CSS框架)

    目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...

  6. Bootstrap（Web前端CSS框架）

    官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile fi ...

  7. Web前端 css实现元素垂直居中的常用方法

    方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</spa ...

  8. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  9. web前端----css补充

    css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图片的位置(也就是设置元素 ...

随机推荐

  1. 如何 3D 打印一个密码锁

    简评:这篇文章介绍怎么用 3D 打印机做一个密码锁,巧妙地利用机械结构的变化实现锁的功能,相当有趣! 3D 打印机非常适合打印静态物体.如果你够聪明,还可以打印出功能物件.如果你特别特别聪明,那你能做 ...

  2. short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?

    对于 short s1 = 1; s1 = s1 + 1;由于 s1+1运算时会自动提升表达式的类型,所以结果是 int型,再赋值给 short 类型 s1时, 编译器将报告需要强制转换类型的错误.对 ...

  3. [Python]json 错误xx is not JSON serializable

    TypeError: Decimal('1457501') is not JSON serializable 在使用json的时候经常会遇到xxx  is not JSON serializable, ...

  4. html5兼容问题

    1.html5对于ie9一下的版本不支持,所以我们可以添加(你可以下载至本地): <!--[if lt IE 9]> <script src="http://cdn.sta ...

  5. MUI 滚动插件使用

    在Vue中 使用MUI滚动插件 官方文档地址:http://dev.dcloud.net.cn/mui/ui/#scroll 示例:初始化scroll控件: mui('.mui-scroll-wrap ...

  6. 高阶篇：4.2.1）DFMEA框架搭建，填写项目与要求

    本章目的:明确DFMEA的数量及目标,搭建框架,填写项目与要求. 1.步骤: 1)明确DFMEA的数量及目标: 2)搭建框架(所有DFMEA的): 3)填写项目与要求: 2.1明确DFMEA的数量及目 ...

  7. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  8. 设置第三方的SMTP服务

    取得授权码:

  9. python学习14-模块

    引入模块的方式: 1. import 模块 2. from xxx import 模块 一.collections 模块 1.Counter() counter是一个计数器,主要用来计数,计算一个字符 ...

  10. 解决执行maven项目出现 SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”. error

    最近再弄maven项目,运行起来没有问题,但是Console控制台会报错,比如说如下的问题异常提示: 由此我们可以看出,报出错误的地方主要是slf4j的jar包,而故障码中“Failed to loa ...