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. Java Builder 模式,你搞懂了么?

    加油.png 前言:最近闲来无事的时候想着看看一些平常用的三方库源码,没想到看了之后才知道直接撸源码好伤身体,一般设计优秀的开源库都会涉及很多的设计模式,就比如 android 开发使用频繁的 okH ...

  2. POJ1330 Nearest Common Ancestors (JAVA)

    经典LCA操作.. 贴AC代码 import java.lang.reflect.Array; import java.util.*; public class POJ1330 { // 并查集部分 ...

  3. ubuntu下面的某些软件安装

    1. python 下面的mysql驱动:不是在pip里面安装,执行下面命令 apt-get install python-mysqldb

  4. Python爬取LOL英雄皮肤

    Python爬取LOL英雄皮肤 Python 爬虫  一 实现分析 在官网上找到英雄皮肤的真实链接,查看多个后发现前缀相同,后面对应为英雄的ID和皮肤的ID,皮肤的ID从00开始顺序递增,而英雄ID跟 ...

  5. Bi-shoe and Phi-shoe(欧拉筛)

    Bamboo Pole-vault is a massively popular sport in Xzhiland. And Master Phi-shoe is a very popular co ...

  6. 经典C面试真题精讲

    第一章 灵魂--指针 101. p++ 请分析下述代码的输出结果 int main() { char* p1 = "China"; char* p2, * p3; p2 = (); ...

  7. Python——付费/版权歌曲下载

    很多歌曲需要版权或者付费才能收听 正确食用方法: 1.找到歌曲编号 2.输入编号并点击下载歌曲 # coding:utf8 # author:Jery # datetime:2019/4/13 23: ...

  8. String数据转Matrix矩阵

    String数据转Matrix矩阵 private Matrix String_To_Matrix(string str) { int[] Remove_Num = new int[10]; int ...

  9. [转]Hive 数据类型

    Hive的内置数据类型可以分为两大类:(1).基础数据类型:(2).复杂数据类型.其中,基础数据类型包括:TINYINT,SMALLINT,INT,BIGINT,BOOLEAN,FLOAT,DOUBL ...

  10. 彻底解决matplotlib中文乱码问题(转)

    彻底解决matplotlib中文乱码问题 1.环境查看a.系统版本查看[hadoop@p168 ~]$ cat /etc/redhat-releaseCentOS Linux release 7.2. ...