html带边框的六边形,css 这种六边形的边框怎么画？

最新推荐文章于 2023-09-22 09:08:46 发布
最新推荐文章于 2023-09-22 09:08:46 发布
阅读量392 收藏
点赞数
文章标签： html带边框的六边形

bVKyTI?w=91&h=41

用一个div+css怎么实现？

bVKyT1?w=90&h=41还这种可以填充颜色的

求代码！

<html>

<head>

<style>

.sixedge{

height: 24px;

width: 55px;

position:relative;

background-color: #FFF;

border-top:1px solid green;

border-bottom:1px solid green;

margin-left:40%;

}

.sixedge:after{

content: '';

position: absolute;

background-color: transparent;

top: 3px;

right: -9px;

width: 17px;

height: 17px;

transform: rotate(45deg);

-ms-transform: rotate(45eg);

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform: rotate(45deg);

border-top: 1px solid green;

border-right: 1px solid green;

}

.sixedge:before{

content: '';

position: absolute;

background-color: transparent;

top: 3px;

left: -9px;

width: 17px;

height: 17px;

transform: rotate(45deg);

-ms-transform: rotate(45eg);

-moz-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-o-transform: rotate(45deg);

border-bottom: 1px solid green;

border-left: 1px solid green;

}

</style>

</head>

<body>

<div class="sixedge">six</div>

</body>

</html>

最简单的是，拆分成左中右，三块，2个三角形和一个矩形，然后合成，3个div

链接给你 自己画吧

新手

.rectangle{

margin:0 auto;

width:200px;

height:51px;

line-height:51px;

text-align:center;

position:relative;

border-top:1px solid #00F;

border-bottom:1px solid #00F;

}

.rectangle:before{

content:"";

position:absolute;

top:7px;

left:-19px;

width:36px;

border-top:1px solid #00F;

height:36px;

border-right:1px solid #00F;

transform:rotate(-135deg);

}

.rectangle:after{

content:"";

position:absolute;

top:7px;

right:-19px;

width:36px;

border-top:1px solid #00F;

height:36px;

border-right:1px solid #00F;

transform:rotate(45deg);

}

@machenchi0207 六边形外框

借用 @machenchi0207 的代码

CSS3渐变实现切角效果

bVKANO?w=1080&h=302

详情见《css揭秘》第三章的切角效果

就是利用伪类 然后给大小为0， 边框加上像素就是了，多试一下

3431402c1bcafac7e7cfb291f3f55629.png

房车实话实说
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中怎么写正六边形,用css画正六边形的方法
weixin_29967003的博客
06-04 935
用css画正六边形的方法发布时间：2020-09-14 14:56:11来源：亿速云阅读：80作者：小新小编给大家分享一下用css画正六边形的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！在之前要先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图(√3其实是根号3)：方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，...
css+html绘制6边型及蜂巢效果
01-20
用html加css的，构建6边型，并在此基础上实现蜂巢排列的效果
html+css 正六边形demo
07-03
正六边形demo 超简单正六边形demo 超简单正六边形demo 超简单正六边形demo 超简单正六边形demo 超简单
html轮廓位置,html – 具有边框/轮廓的六边形
weixin_35843830的博客
06-04 236
通过伪元素通过边界创建六边形是不可能实现的.一种替代方案是在六边形内叠加六边形,从而实现相同的期望结果.这是一个可以实现的example： HTML – 相当基本,为更多的边框继续相同的模式.CSS(三层 – 两个内在元素)从六角形类开始,定义shape / size / colors：.hex {margin-top: 70px;width: 208px;height: 120px;back...
css实现六边形边框
十三月的博客
11-01 1167
css实现六边形边框
html如何给六边形加上边框,html5 - css写的六边形怎么加边框阴影
weixin_30113575的博客
06-20 334
html5 - css写的六边形怎么加边框阴影黄舟2017-04-17 13:58:27 0 1 378怎么给上下两个三角形加上边框阴影？.hexagon{position: relative;display:inline-block;margin-right: 20px;width: 200px;height: 120px;background-color: #fff;-moz-box-...
div+css（实体与边框）六边形
dada_master的博客
11-05 7303
多边形实体 多边形边框
css画正六边形的两种方法
12-11
这种方法是将正六边形分解成三个相同宽度和高度的div，然后通过绝对定位和CSS3的`transform: rotate()`属性将它们旋转到正确的位置。这三个div的边框宽度和颜色设置使得它们组合在一起形成六边形。例如： ```html ...
css3实现六边形边框的实例代码
11-21
在CSS3中，实现六边形边框的技巧主要依赖于层叠的多个矩形以及利用`transform`属性进行旋转。下面将详细解释这个过程。 首先，我们需要创建三个嵌套的`div`元素，分别命名为`boxF`、`boxS`和`boxT`。这些`div`元素...
css3 svg文字轮廓边框特效
07-24
本文将深入探讨“CSS3 SVG文字轮廓边框特效”这一主题，包括CSS3和SVG的基本概念、如何利用它们创建文字轮廓边框特效，以及相关文件“jiaoben7837”的可能内容。 ### CSS3简介 CSS3（层叠样式表第三版）是用于描述...
html怎么做六边形效果图,用css绘制六边形的div
weixin_33483080的博客
06-07 506
.sharp:before {content:"";/*不需要展现文字等内容,所以设置为空字符 */width:0px;border-bottom:80px solid transparent;border-top:80px solid transparent;border-right:40px solid orangered;position:absolute;left:-40px;top:0p...
懒人原生纯CSS实现六边形效果
06-12
效果描述： 最近网上看到一个前端面试题，要求面试者用纯CSS实现一个6边形的效果 乍一看有点乱，但是仔细分析下，其实并没有那么难 将六边形拆开成三部分，左边是一个三角形，中间一个长方形，右侧再来一个三角形，然后再将其定位起来即可 那么就是一个div，内部嵌套三个div即可实现 当然，你也可以省略左右两个div，只用一个div即可实现，怎么办呢？那就是用CSS3的伪类代替左右两个div 使用方法： 1、将style.css中的样式拷贝到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
HTML中盒子的做法
weixin_65905274的博客
03-02 2801
width是盒子模型的宽度； height是盒子模型的高度； border是盒子模型的边框； background是盒子模型的背景颜色； padding是盒子模型的内边距； margin是盒子模型的外边距； div标记是一个区块容器标记，将页面分割为独立的、不同的部分。 border-style是边框样式，none是无、solid是单实线、dashed是虚线、dotted是点线、double是双实线。样式属性border-style ：上边{右边 下边 左边}。 border-width是边
HTML+CSS手写科技感六边形
cautionHua的博客
12-16 1074
最近有个需求需要实现一堆这种五颜六色的六边形作为气泡容器，于是就参考网上的思路写了一个这样的六边形。 效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
html如何给六边形加上边框,css写的六边形怎么加边框阴影
weixin_39673947的博客
06-20 267
怎么给上下两个三角形加上边框阴影？ .hexagon{ position: relative; display:inline-block; margin-right: 20px; width: 200px; height: 120px; backgrou...
学习WebGL_005_绘制带边框的矩形
qq_21476953的博客
10-10 648
参考: 对应FunWithWebGL2-007 https://www.cnblogs.com/charlee44/p/11628462.html https://blog.csdn.net/lufy_Legend/article/details/38549421 WebGL 编程指南 1、引入顶点缓冲(IBO) 绘制矩形需要2个三角形,也就是6个顶点坐标。但是顶点2和顶点3的数据是重复的...
html css制作正六边形
半兽先生的博客
09-22 603
【代码】html css制作正六边形。
html如何将图片做成六边形,css 如何在html页面上输出一个六边形呢？
weixin_34677884的博客
05-31 650
摘要:下文讲述使用css脚本在页面上绘制一个六边形的方法分享,如下所示:六边形是数学里面常见的一种不规则的形状，那么如何使用css脚本在html上绘制一个六边形呢？实现思路:1.绘制一个长方形2.绘制一个三角形3.将长方形 上下分别叠加两个三角形即可形成一个六边形如下所示:例:使用css绘制一个六边形的示例分享maomao365.com css 绘制 六边形 的示例分享#liubianxing {...
css-6 df15,CSS3 六边形渐变色背景
weixin_36085895的博客
08-03 302
CSS语言：CSSSCSS确定html,body {width: 200%;height: 100%;margin: 0;padding: 0;background: #000;overflow: hidden;}.hex:before {content: '';width: 0;height: 0;border-bottom: 30px solid #0df2df;border-left: 52...
css六边形黑色边框
最新发布
12-28
以下是使用CSS实现六边形黑色边框的方法： ```html .hexagon { width: 100px; height: 55px; background-color: transparent; position relative; margin: 27.5px 0; } .hexagon:before, .hexagon:after { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值