六边形块级元素的绘制

使用h5之前，都是利用图片作为背景来实现的，现在有h5+css3这把利器，顺利完美的绘制六边形。

绘制六边形

html代码：

<div class="shape-layer"></div>

可见html代码非常简单，这里要运用伪元素来实现

css代码：

.shape-layer {position:relative;width:336px;height:196px;background-color:#0174db;}
.shape-layer::before {content:"";position:absolute;left:0;top:-96px;width:0;height:0;border-left:transparent solid 168px;border-bottom:#0174db solid 96px;border-right:transparent solid 168px;}
.shape-layer::after {content:"";position:absolute;left:0;bottom:-96px;width:0;height:0;border-left:transparent solid 168px;border-top:#0174db solid 96px;border-right:transparent solid 168px;}

看完这个案例，对于绘制三角形就简单了，尝试自己绘制一下吧。
本文为原创文章，转载请注明出处，多谢您的支持。

六边形块级元素的绘制相关推荐

网页编程技术二（块级元素和行内标签）
1.块级元素顾明思义,块级标签在网页中显示为块:块级标签一般独占一行,新的块级标签将从新的一行开始排列,它可以容纳其他块级元素和内联元素. 常见的会计标签: 1.1标题标签:<h1>&l ...
html块级标签转换,html标签中的块级元素详解
今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念块级元素是一类css样式display默认值为block的html标 ...
css块级元素与行级元素
看先下效果图代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
CSS文档流与块级元素和内联元素
文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些?
前端面试题(8) 打卡: 2021-5-2 HTML HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些? (1)行内元素 inline element a - 锚点 b - 粗体 ( 不推荐 ...
css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...
【HTML】行内元素与块级元素
一.行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2 ...
CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block&q ...

六边形块级元素的绘制

六边形块级元素的绘制相关推荐

最新文章

热门文章