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. Linux kill 指定进程名的四种方式

    方法1 pkill 进程名 方法2 killall 进程名 方法3 kill -9 $(ps -ef|grep 进程名关键字|grep -v grep|awk '{print $2}') 这个是利用管 ...

  2. 【手记】如果Idx/Sub字幕导不进MKVToolNix，看看是否这个原因

    用记事本之类的文本编辑器打开idx文件,看看时间轴部分是不是存在不规范的条目,比如: timestamp: :::, filepos: 注意,上述条目中,filepos:后面缺了一个空格,就这么一处问 ...

  3. BZOJ - 3166 可持久化Trie 维护次大区间

    题意:给出\(a[1...n]\),找出一个连续区间\(a[l...r],r>l\),令该区间的次大值为\(a_k\),使得\(a_k⊕a_i,l≤i≤r\)最大,输出全局最优解 (这题意有点别 ...

  4. 1095. Maximum Swap —— Weekly Challenge

    题目限定输入是[0, 10^8],因而不用考虑负数或者越界情况,算是减小了难度. public class Solution { /** * @param num: a non-negative in ...

  5. python自动化day4-函数嵌套、名称空间、作用域、装饰器

    1.函数嵌套 #函数的镶套调用:在调用一个函数的过程中,又调用其他函数 def max2(x,y): if x > y: return x else: return y def max4(a,b ...

  6. Oracle WebLogic Server 12c 新特性

    美国时间2011年 12月9日,Oracle公司正式发布WebLogic 12c版本,c是cloud的缩写.截止当前(2013年8月)最新版本为Oracle WebLogic Server 12c ( ...

  7. laravel5.5打印sql语句

    额.其实laravel很不方便的地方就是sql写错之后不是很好调试. 上方法. //DB::connection()->enableQueryLog(); // 开启QueryLog//$rep ...

  8. 2.使用ngx_http_auth_basic_module模块为不带认证的资源添加授权

    1.首先需要生成用户名和密码 使用openssl来生成,生成命令(openssl在安装nginx的时候已经安装) echo "kibana:$(openssl passwd -crypt y ...

  9. 利用JS获取本地时间和服务器时间

    <p id="labTime"> <script type="text/javascript"> //取客户端时间 setInterva ...

  10. TreeSet和TreeMap不能存放重复元素？能不能存放null?

    问题一:本来认为TreeMap不能存放重复元素?其实并非如此: 其实一般情况下是不允许存放重复元素的,但是它并非这么死板,在一些情况下是可以存放重复元素的,存了又会有引入其他问题. 问题二:能不能存放 ...