CSS应用之绘制正六边形

最新推荐文章于 2024-04-12 09:00:00 发布
最新推荐文章于 2024-04-12 09:00:00 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： HTML&CSS 文章标签： css3 html5
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/Freya_yyy/article/details/105346568
版权

使用CSS绘制一个正六边形：

具体步骤：通过绘制三个长方形进行叠加实现，其中长方形的长宽比例为：\sqrt{3}：1。

note：设置标签的position属性为absolute时，即设置为绝对定位的元素相对于属性不是position: static;的祖先元素进行定位。如果没有设置，则根据html或body元素进行定位，至于是哪一个由用户代理（浏览器）决定。

代码：

效果图：

Freya_yyy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中怎么写正六边形,用css画正六边形的方法
weixin_29967003的博客
06-04 936
用css画正六边形的方法发布时间：2020-09-14 14:56:11来源：亿速云阅读：80作者：小新小编给大家分享一下用css画正六边形的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！在之前要先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图(√3其实是根号3)：方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，...
CSS3绘制六边形的简单实现
09-24
在CSS3中绘制六边形是一种利用边框和伪元素技术来实现的创新方法。首先，我们要明白六边形的基本构造是由六个相等的三角形组成的。因此，要使用CSS来创建六边形，我们需要创建两个三角形，分别置于原始元素的前后，...
如何用CSS做六边形图片/蜂巢形图集（详解）
Akikang的博客
12-09 4434
目标效果： 要达到蜂巢形的图集展示，实质上就是做六边形图片。 实现思路： 1.一个大div内有两个子div，分别将两个div顺时针和逆时针旋转60度，形成六边形； 2.给三个div加同一个背景，调节背景大小和位置，使得三张图片完全重合，形成六边形图片效果； 3.复制粘贴5个六边形，并做flex布局。 第一步：画出3个div 第二步： 2-1 给1一个div加同一个背景图...
CSS 绘制正六边形
Nimngzxa的博客
07-01 288
使用伪类方法实现正六边形。
[CSS3] 绘制六边形
qq_14993591的博客
12-16 186
【代码】[CSS3] 绘制六边形。
html中怎么写正六边形,纯CSS3绘制正六边形可自定义投影（原创）
weixin_42523104的博客
06-04 270
* {padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}ul {position:absolute;left:0;top:50%;width:100%;padding:0 30px;list-style:none;margin:0;-webkit-tr...
css六边形插入图片蜂巢幻灯代码,纯css绘制蜂巢六边形效果
weixin_42599558的博客
08-03 262
html>CSS3实现六边形图片展示效果body,div,img,ul,li{margin:0;padding:0;}body{font-size:12px;background-color:#DDD;min-width:1200px;}ul,ulli{list-style:none;}.boxF,.boxS,.boxT,.overlay{width:200...
CSS 伪元素画一个六边形
最新发布
g841805的博客
04-12 206
【代码】CSS 伪元素画一个六边形。
html绘制如图所示六边形,纯css绘制蜂巢六边形效果
weixin_39690972的博客
06-23 370
纯CSS绘制的六边形复制代码代码如下:Draw Hive.hexagon {display: inline;float: left;}#second {margin-left: 4px;}#third {clear: left;margin-left: 54px;margin-top: -28px;}.hiveTop{width: 0;border: 30px solid #6C6;border-...
css实现六边形边框
十三月的博客
11-01 1171
css实现六边形边框
纯css绘制蜂巢六边形效果
09-25
纯CSS绘制蜂巢六边形效果 纵观给定的文件信息，我们可以看到，这篇文章主要介绍了如何使用纯CSS绘制蜂巢六边形效果。下面，我们将详细解释该文章中涉及到的知识点。 CSS基本概念 在开始之前，让我们先回顾一下...
css画正六边形的两种方法
09-27
在CSS中绘制正六边形是一项实用的技巧，可以用于创建各种图形和设计元素。本文将详细介绍两种使用CSS实现正六边形的方法。 方法一基于使用伪元素`::before`和`::after`来创建两个三角形，这些三角形与主元素组合...
CSS应用之实现三列布局（左右固定宽度，中间自适应）
热门推荐
Freya_yyy的博客
07-20 1万+
实现一个三列布局的左右宽度固定，中间自适应。可以使用传统的css布局，也可以使用css3的新特性flex布局实现。 补充圣杯布局和双飞翼布局。 1.使用自身浮动法： 自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。 该布局法的不足是三个元素的顺序...
为table设置滚动条，汇总CSS的overflow属性
Freya_yyy的博客
09-03 4106
做项目的时候有一个需求：让一个table的高度固定，这样多出来的内容需要在竖直方向显示滚动条。 遇到问题：table的宽度已经设置100%,td的宽度已设置。然后无论设置table的高度为多少，都不会出现竖直方向的滚动条。 解决方案： 为table设置一个父div,并设置父div的height属性为固定值； 为父div设置overflow-y: scroll; 1.overflow属性：C...
区分CSS单位：px、em、rem、rpx
Freya_yyy的博客
09-01 3054
记录一下前端开发中容易混乱的几个单位：px、em、rem、rpx（用于微信小程序） 1.px：绝对单位，名称为像素。像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你所用屏幕分辨率的最小分割)。 2.em：相对单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 em单位转换为像素值...
CSS应用之画三角形（等腰、直角、正三角形）和提示框
Freya_yyy的博客
07-29 1960
1.用CSS实现一个三角形： 需要把元素的宽度、高度设置为0，然后为其设置边框。需要哪个边框设置哪个边框的颜色，相邻边框的颜色设置color为transparent，对应边框可以设置color为transparent也可以不设置。代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content...
CSS应用之设计满屏品字布局
Freya_yyy的博客
07-29 1126
设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中，需要对CSS能够灵活的运用。首先，这里面涉及到的相关知识点有： 1.元素的水平居中： 使用margin:0 auto;可以水平居中； 使用text-align:center;给父元素设置使其行内元素水平居中。 2.元素相对窗口定位： 使用position:fixed;固定定位，元素总是根据浏览器的窗口进行定位； 使用positio...
h5新增元素之canvas渲染问题
Freya_yyy的博客
08-05 727
笔试题中遇到canvas元素渲染的问题，平时不太使用canvas元素，有些疑惑，总结一二。 <canvas>是HTML5新增的，可以通过脚本（通常为javascript）在其中绘制图像的HTML元素。<canvas>元素本身没有绘制能力，它仅仅是一个图形容器，必须使用脚本来完成绘图任务，它就像我们画画的画布一样，需要人来用画笔完成画作。 1.canvas基本使用： ...
css线框双边框正六边形矩形
12-13
以下是使用CSS实现线框双边框正六边形矩形的代码： ```html <div class="inner"></div> ``` ```css .hexagon { position: relative; width: 200px; height: 115.47px; background-color: transparent; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值